HOME

イージング作成(生成) ペジェ曲線分割、切断

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

推奨 ブラウザ : chrome


x : y :
length : angle :
ms
js
css

前回、CSS のアニメーションの transition で使用する
イージング(トランジッションタイミング)の値を生成するツールを作成したのですが、
その、パスを分割、切断して、その値でイージングを作成したらどうなるか試してみました。

パスの分割方法は、曲線を [ t : 1 -t ] に分割とあったのですが、
(t) の基準が分からず、、、_(:3」∠)_
パスの長さ、又は、制御点 1 と 4 の距離、、、
このあたりも、確認が必要です。

このプログラムでの分割方法は、
三次ペジェの座標取得、
その座標から矩形データを取得、
マウスの X, Y 座標で当たり判定の流れです。
以前、試した、矩形とマウス座標の当たり判定で、
要素とパス上の座標が取得出来たので、この方法で作成しました。

svg の場合、パスのストローク幅を大きく指定すれば、
座標の遊びも大きくなるので、イベントが発生した要素と座標を、
容易に取得する事が出来ると思うのですが、
canvas 要素に、パスのストローク幅を 1px で描画した場合、
パス上の座標の取得???
ここも、確認が必要です。。。ヽ(´ー`)ノ

「 使用方法 」
get で取得した applyData の値を読み込ませると、制御点座標を復元します。
パス上 click 制御点追加
[ 制御点 ] drag → 制御点 移動
[ 制御点上 ] ctrl + drag → 制御点 円 移動
[ 制御点 : 四角上 ] ctrl + click → 制御点 円 リセット
[ 制御点 : 円上 ] ctrl + alt + click → 制御点 円 リセット
[ 制御点 : 四角クリック ] 制御点 四角 x, y 座標 変更
[ 制御点 : 円クリック ] 制御点 四角から、制御点 円までの長さ、 角度 変更

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