How can i add bezier curve to Path in konva?

Question

Could you please guide me on how bezier curve can be added to Path. Thanks!

here is my demo - linkhere is my codepen

Answer 1

You can generate svg path with bezier curve like this:

function computeQuadraticBezierPathData(p1, p2, p3) {
  const pathData = `M${p1.x},${p1.y} Q${p2.x},${p2.y} ${p3.x},${p3.y}`;
  return pathData;
}

To the Konva.Path do this:

function updateLine() {
  var newpoints = computeQuadraticBezierPathData(circle1.position(), anchor.position(), circle2.position());
  path.setData(newpoints);
}

https://codepen.io/lavrton/pen/BaqoKJm