Paper.js 动画路径在点击时移动

Question

我想做的是：

点击某处（获取点击位置）
告诉路径“去点击的地方”
路径正在通过动画平滑移动到单击的位置

到目前为止我有这个代码：

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();
    }
}

工作jsfiddle

当前代码明显错误。路径总是在右下角，还有其他问题。我想我可以使用的是这样的东西：

jsfiddle

但是我无法理解它是如何工作的。

Answer 1

您必须为此编辑以下行：

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

这是您更改后的 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。

Paper.js 动画路径在点击时移动

Paper.js animate path move on click

javascript

canvas

paperjs