🧬
SVGとVueでノードエディタGUIをつくる
できあがりイメージ
デモとソースコード
※スマホでは動かないよ！
| Step | 簡易説明 | Demo | Code |
|---|---|---|---|
| #1 | ベジェ曲線 <path> の基礎（ドラッグ可） |
Demo | Code |
| #2 | 始点と終点ペアの配列を渡して描画 | Demo | Code |
| #3 | 枠の IN/OUT を枠名ペアで繋ぐ | Demo | Code |
| #4 |
<foreignObject>で Vue コンポーネントを表示 |
Demo | Code |
| #5 | データの分離と IN 点の複数化 | Demo | Code |
| #6 | npm: svg-pan-zoom の導入 |
Demo | Code |
| #7 | データを Vuex ストアに移動 | Demo | Code |
| #8 | パン・ズーム制御のトグルとマウス位置十字描画 | Demo | Code |
| #9 | 枠データの追加と枠のドラッグ、制御モード自動切替 | Demo | Code |
ステップの一部をご紹介
Step 1
Step 2
Step 3
Step 6
Step 9
リポジトリ
最終的には
Unreal Engine のブループリントみたいなやつをつくりたい。
背景と苦労点の解説
おねがい
もっといいやり方があったらぜひ教えてください！
Special thanks
Discussion