kineticjs - KineticJS を使用して、ある円から別の円への矢印を作成する方法は?

Question

KinectJS を使用して、ある円から別の円への矢印を作成する方法は?

radius=r と stroke=1 の 2 つの円があります。滑らかな丸みを帯びた矢印を作成するにはどうすればよいですか?

ありがとう

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
  });