Paper.js動畫上點擊路徑移動

Question

什麼IAM試圖做的，是這樣的：

• 點擊某處（獲得點擊的位置）
• 告訴路徑「去點擊的點」
• 路徑經由有生順暢移動到點擊位置

到目前爲止我有這樣的代碼：

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

當前代碼顯然是錯誤的。路徑總是在右下方，還有其他問題。我想，我可以使用是這樣的：

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上的矢量幾何圖形。