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