CODEWITHSUNDEEP
performanceanimationcanvaslinepaperjs
axel
axel

Reputation: 4127

How to reposition a Path Line in paperjs with best efficiency?

quick question about line repositioning with Paper.js. I started to play a bit with this library and I found it very interesting for small kind of animation but sometimes the documentation is not really the best ever. Anyway, my goal is to move a line.

This is my code to create it

a_lines[(i -1) / 2].line = new Path.Line({
    from: a_lines[(i -1) / 2].start,
    to: a_lines[(i -1) / 2].end,
    strokeColor: '#282828'
});

and this is the one I invented to use it to move it:

a_lines[(i -1) / 2].line.removeSegment(0);
a_lines[(i -1) / 2].line.add(a_lines[(i -1) / 2].start);
a_lines[(i -1) / 2].line.removeSegment(0);
a_lines[(i -1) / 2].line.add(a_lines[(i -1) / 2].end);

It works fine, but I am asking if I really need to to this operation with four command lines. At the moment is the best solution I found. But has somebody better and more efficient solutions? Thanks a lot.

Upvotes: 4

Views: 820

Answers (1)

bmacnaughton
bmacnaughton

Reputation: 5308

Your solution is in the right direction; deleting a line and recreating it is slower than just manipulating the segment points. But you can do a bit better by merely altering the existing segment points.

line = a_lines[(i - 1) / 2].line;
line.segments[0].point = newStartPoint;    // repositioning as you like
line.segments[1].point = newEndPoint;      // ditto

Here's a simple sketch showing it work without any extraneous code:

Segment Point manipulation sketch

Slightly modified Segment Point manipulation sketch

Upvotes: 4

Related Questions