Kineticsjs drawing arc with Kinetic.Shape

Question

Hi i want to build a loading animation, where a Doughnut Chart is becoming bigger and bigger. I need to do this with a custom shape, because i need the hole in the middle for other animations. What i get so far is:

var stage = new Kinetic.Stage({ container: 'loader', width: 600, height: 200 });

var layer = new Kinetic.Layer();

var circle = new Kinetic.Circle({ x: stage.getWidth() / 2+200, y: stage.getHeight() / 2, radius: 70, fill: 'red' });

var x = stage.width / 2; var y = stage.height / 2; var radius = 75; var startAngle = 1.1 * Math.PI; var endAngle = 1.9 * Math.PI; var counterClockwise = false;

var arc = new Kinetic.Shape({
sceneFunc: function(context) {
    context.beginPath();
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    context.closePath();
    // KineticJS specific context method
    context.fillStrokeShape(this);
},
fill: 'green',
stroke: 'red',
strokeWidth: 4 });
// add the shape to the layer

layer.add(arc);

// add the layer to the stage stage.add(layer);

if some body could help me would be great

here is my fiddle: http://jsfiddle.net/FabuBaracus/D9j3S/

markE markE · Accepted Answer · 2014-04-14T17:45:01

You can draw an adjustable arc using a Kinetic.Shape.

A Demo: http://jsfiddle.net/m1erickson/RZRVx/

First create an arc:

var arc = new Kinetic.Shape({
  sceneFunc: function(context) {
    context.beginPath();
    context.beginPath();
    context.arc(this.cx,this.cy,this.radius,-PI2/4,PI2*this.arcPercent/100-PI2/4);
    // KineticJS specific context method
    context.fillStrokeShape(this);
  },
  stroke: 'green',
  strokeWidth:25
});

Then add some properties to that arc that define how big your arc will be:

arc.cx=100;
arc.cy=100;
arc.radius=75;
arc.arcPercent=33;  // percent is 0-100

And finally create a function that you can use to adjust the sweep of the arc

function setArcPercent(percent){
    arc.arcPercent=percent;
    layer.draw();
}

Kineticsjs drawing arc with Kinetic.Shape

1 Answers