如何使用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 
    });