如何在Kinetic JS中绘制部分Bezier曲线

Question

这个问题可能有点难以制定，但这里有：

在KineticJS中使用bezierCurveTo时，您可以为其指定曲线终点和控制点的坐标。是否有一种简单的方法可以使曲线实际上不会继续到指定的终点，而是沿曲线的另一点停止？

我问的原因是因为我想绘制一条bezier曲线，然后是另一条曲线，它沿着相同的曲线绘制，但不会一直到最后。现在，我知道该怎么做是用新的终点绘制一条新曲线，然后猜测并检查控制点，直到两条曲线匹配为止。但这很耗时，而且看起来不太完美。

Answer 1

我不知道部分Bezier曲线，但您可以通过绘制一条具有笔触渐变的曲线来实现相同的效果。在渐变中的同一点创建两个停靠点以创建硬色线。

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