Question

我想做的是：

点击某处（获取点击位置）
告诉路径＆＃34;转到点击的地点＆＃34;
路径通过动画平滑移动到点击位置

到目前为止，我有这段代码：

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。如果您想了解我所做的以及如何改进您的代码，可以尝试在paperjs website上阅读一些关于矢量几何的内容。

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

1 个答案: