javascript - 如何在 Kinetic JS 中绘制部分贝塞尔曲线

Question

这个问题可能有点难以表述，但这里有：

在 KineticJS 中使用 bezierCurveTo 时，你给它曲线终点的坐标以及控制点的坐标。有没有一种简单的方法可以让曲线实际上不继续到指定的终点，而是停在曲线上的另一个点？

我问的原因是因为我想画一条贝塞尔曲线，然后在它上面再画一条遵循相同曲线但不会一直走到尽头的曲线。现在我所知道的就是用新的终点绘制一条新曲线，然后猜测并检查控制点，直到两条曲线匹配。但这很耗时，而且看起来永远不会很完美。

Answer 1

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

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

编辑：这个答案显示了如何分割贝塞尔曲线。