如何使用KineticJS從一個圓圈創建箭頭到另一個圓圈？

Question

如何使用KinectJS創建從一個圓圈到另一個圓圈的箭頭？

我有2個半徑= r和筆畫= 1的圓圈。我該如何做一個圓滑的圓形箭頭，或者只是從一個到另一個的路徑？

感謝

Answer 1

如果你想只是一個簡單的線，你可以使用

Kinetic.Line({ 
     points: [circle1.getX(), circle1.getY(), circle2.getX(), circle2.getY()], 
     stroke: 'red', 
     strokeWidth: 15, 
     lineCap: 'round', 
     lineJoin: 'round' 
}); 

曲線可以用Kinetic.Spline（）創建

var spline = new Kinetic.Spline({ 
    points: [{ 
     x: circle1.getX(), 
     y: circle1.getY() 
    }, { 
     x: (circle1.getX()+circle2.getX())/2, 
     y: (circle1.getY()+circle2.getX())/2 +50 // modify this 50 to something that makes it round 
    }, { 
     x: circle2.getX(), 
     y: circle2.getY() 
    }], 
    stroke: 'red', 
    strokeWidth: 2, 
    lineCap: 'round', 
    tension: 1 
    });