CODEWITHSUNDEEP
javascriptcanvaspaperjs
jayfield1979
jayfield1979

Reputation: 355

Animate a circle being drawn using Paper.js

I'm trying to animate a circle being drawn using Paper.js.

As the circle tool is just a quick access for instantiating a path constructed via moveTo/arcTo etc, there are no arguments to support start and end angles (for open pie chart-like circles).

What I am looking for is a way to animate the circle being drawn from it's first point to an angle of my choice at a certain radius.

The actual canvas specification allows for explicit startAngle and endAngle to be specified. If this was the case within Paper.js I could easily achieve what I am looking for. However, within Paper.js I have yet to come across a method of replicating such control. I created something in Fabric.js that worked as Fabric's implementation of the circle shape used the same attributes as the arc command in the specification.

Does anyone know of a way this can be achieved so I can animate the endAngle?

Upvotes: 1

Views: 709

Answers (1)

markE
markE

Reputation: 105035

Here's a conversion function that accepts html5 canvas arc arguments and returns the from, through, to arguments needed for a Paper.js arc.

function canvasArcToPaperArc(cx,cy,radius,startAngle,endAngle,strokecolor){
    var startX=cx+radius*Math.cos(startAngle);
    var startY=cy+radius*Math.sin(startAngle);
    var endX=cx+radius*Math.cos(endAngle);
    var endY=cy+radius*Math.sin(endAngle);
    var thruX=cx+radius*Math.cos((endAngle-startAngle)/2);
    var thruY=cy+radius*Math.sin((endAngle-startAngle)/2);
    var from = new Point(startX,startY);
    var through = new Point(thruX,thruY);
    var to = new Point(endX,endY);
    return({from:from, through:through, to:to});
}

Upvotes: 2

Related Questions