Search code examples
javascriptgeometrypaperjs

Paper.js closed arc changes its dimensions on rotation

I've drawn a simple half circle shape using a closed arc, the arc is created using a start point (x,y), end point (x,y) and a through point (x,y)

var from = new Point(20, 20);
var through = new Point(60, 20);
var to = new Point(80, 80);
var path = new Path.Arc(from, through, to);
path.closed = true;

its width and length are NOT the same, when i rotate it at any degree, its dimensions start morphing.. why is that happening and how can i fix it?

note that this only happens when i set the length and width of the shape to be different using the path.size property.

path.size = [calcWidth, calcHeight];

the problem is as you see in the images below.

before rotating

after rotating

Solution

  • solved..i was using both size property and scale function on my shape. what was causing the problem is i would rotate the shape and THEN call the scale function.

    instead i set the size, then scale the shape and after that call the rotate function. this will allow the shape to maintain its dimensions without any changes