HOME

SVG 三次ペジェ曲線を引く test-A

{ svg, javascript で作成したプログラム一覧 }

推奨 ブラウザ : chrome

SVG を使用して、javascript で 三次ペジェ曲線を引きます。(三次ペジェ曲線を描くテストです。)
SVG 要素クリックで制御点が追加されます。
また、ドラッグでカーブペジェ??が描画できると思います。
制御点が表示されますが、動作しません。
描画出来る path 要素は、一つで、 path を閉じる事も出来ません。。。。_(:3」∠)_

var mx = element.transform.animVal[0].matrix;
var mx = element.transform.animVal.getItem(0).matrix;
transform の値がが格納されているのは、
chrome, firefox が、上。
下が、 edge, IE, chrome, firefox 共通で取得できました。


<path id="target" d="M0,400 C0,0 400,0 400,400" stroke-width="5" stroke="blue" />
制御点(1)の x, y が、それぞれ 0%, 制御点(2)の x, y が、それぞれ 100%
制御点(2)の x, y が、それぞれ 0%, 制御点(3)の x, y が、それぞれ 100%
制御点(3)の x, y が、それぞれ 0%, 制御点(4)の x, y が、それぞれ 100%

制御点(1),制御点(2)間、
制御点(2),制御点(3)間の
同じ比率上にある座標を直線で結ぶ
制御点(2),制御点(3)間、
制御点(3),制御点(4)間の
同じ比率上にある座標を直線で結ぶ

結んだ直線の同じ比率上にある座標を求める。
その2点の座標を直線で結ぶ。
この直線の同じ比率上にある座標が3次ベジェ曲線上の座標。
たぶん。。。_(:3」∠)_

上の計算計算から
ベジェ曲線上の座標を求めて、3次ペジェ曲線を描いています。

数学の勉強をやり直ししてたりします。_´ω`)_