1

この質問は定式化するのが少し難しいかもしれませんが、次のようになります。

KineticJS で bezierCurveTo を使用する場合、曲線と制御点の終点の座標を指定します。曲線を実際に指定された終点まで継続するのではなく、曲線に沿った別の点で停止させる簡単な方法はありますか?

私が尋ねる理由は、ベジェ曲線を描き、その上に同じ曲線をたどるが最後まで行かない別の曲線を描きたいからです。今のところ、新しい終点で新しい曲線を描き、2 つの曲線が一致するまでコントロール ポイントを推測して確認する方法しかわかりません。しかし、これには時間がかかり、完璧に見えることは決してありません。

4

1 に答える 1

2

部分的なベジエ曲線についてはわかりませんが、ストローク グラデーションを使用して 1 つの曲線を描くことで、同じ効果を実現できます。グラデーションの同じポイントに 2 つのストップを作成して、ハード カラーのラインを作成します。

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

編集:この回答は、ベジエ曲線を分割する方法を示しています。

于 2013-02-12T19:12:56.700 に答える