CODEWITHSUNDEEP
kineticjs
Totty.js
Totty.js

Reputation: 15831

How to create an arrow from one circle to another with KineticJS?

How to create an arrow from one circle to another with KinectJS?

I have 2 circles with radius=r and stroke=1. How do I do a smooth rounding arrow, or just path from one to another?

thanks

Upvotes: 1

Views: 890

Answers (1)

SoluableNonagon
SoluableNonagon

Reputation: 11755

If you want just a simple line, you could use 

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

Curved Lines can be created with a 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
  });

Upvotes: 1

Related Questions