javascriptkineticjs

How to draw partial Bezier curves in Kinetic JS

This question may be a little difficult to formulate, but here goes:

When using bezierCurveTo in KineticJS, you give it the coordinates of the ending point for the curve as well as for the control points. Is there a simple way to have the curve not actually continue to the specified ending point, but instead stop at another point along the curve?

The reason I ask is because I want to draw a bezier curve and then another on top of it that follows the same curve but doesn't go all the way to the end. Right now all I know how to do is draw a new curve with the new ending point and then guess and check control points until the two curves match up. But this is time consuming and never looks quite perfect.

Solution

  • I don't know about partial Bezier curves, but you could accomplish the same effect by drawing one curve with a stroke gradient. Create two stops at the same point in the gradient to create a hard color line.

    var grd=ctx.createLinearGradient(bezStartX,bezStartY,bezEndX,bezEndX);
grd.addColorStop(0,"black");
grd.addColorStop("0.5","black");
grd.addColorStop("0.5","blue");
grd.addColorStop("1","blue");

ctx.strokeStyle=grd;
ctx.beginPath();
ctx.moveTo(bezStartX,bezStartY);
ctx.bezierCurveTo(bexCtrl1X,bezCtrl1Y,bexCtrl2X,bexCtrl2Y,bezEndX,bezEndX);
ctx.stroke();

    Edit: This answer shows how to section a Bezier curve.