javascriptでベジエ曲線をコントロールする - 手抜きLab＠DTPの現場暑い日々が続いていますが、皆様はいかがお過ごしでしょうか。こう暑いと水辺が恋しくなります。次のお休みは海でも行ってみようかなと思いつつ仕事をこなしていますが、ここ数年泳いだ事が無いので少々怖かったりもします。 さて、本題。illustratorはベジエ曲線を利用した描画システムが特徴的なのは皆様ご存知の通りなのですが、このベジエ曲線ってスクリプトから正確にコントロールするには、それなりの知識が不可欠な訳です。 理論上ではバーンスタイン基底関数なんかが出て来て非常に難解で複雑なものなのだけど、実はこのベジエ曲線、実装はとても容易でわかり易かったりするんだ。 まずは、下図の2つのアンカーポイントの間にある曲線の中点にアンカーポイントを追加する場合を考えて見よう。 この場合、コントロールポイントは双方のanchorと開始点のleftDirection、終点のrightDirectionの4点。
