CODEWITHSUNDEEP
javascriptcanvaspaperjs
Mevia
Mevia

Reputation: 1564

Paper.js animate path move on click

What iam trying to do, is this:

so far i have this code:

paper.tool.onMouseDown = function(event) {
    x = event.event.offsetX;
    y = event.event.offsetY;
    paper.view.attach('frame', moveSeg);
}

var x;
var y;
function moveSeg(event) {
    event.count = 1;
    if(event.count <= 100) {
        myPath.firstSegment.point._x += (x / 100);
        myPath.firstSegment.point._y += (y / 100);
        for (var i = 0; i < points - 1; i++) {
            var segment = myPath.segments[i];
            var nextSegment = segment.next;
            var vector = new paper.Point(segment.point.x - nextSegment.point.x,segment.point.y - nextSegment.point.y);
            vector.length = length;
            nextSegment.point = new paper.Point(segment.point.x - vector.x,segment.point.y - vector.y);
        }
        myPath.smooth();
    }
}

working jsfiddle

current code is obviously wrong. The path is always going bottom right and there are other problems. I guess that what i could use is something like this:

jsfiddle

But iam having problems to understand how it works.

Upvotes: 2

Views: 1365

Answers (1)

Christoph
Christoph

Reputation: 1340

You have to edit the following lines to this:

myPath.firstSegment.point._x += (x - myPath.firstSegment.point._x)/10;
myPath.firstSegment.point._y += (y - myPath.firstSegment.point._y)/10;

Here is your changed jsfiddle. If you want to understand what I did and how to improve your code maybe try to read a bit about vector geometry on the paperjs website.

Upvotes: 4

Related Questions