黒板 : canvas 要素 描画テスト (l)

negoto

License: MIT License

Fork
0
Fav
0
View
161
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 5780 lines
  • HTML 63 lines
  • CSS 384 lines

黒板 : canvas 要素 描画テスト (l)

[ select ] : SVG の path 要素の d 属性値 (add | set) ボタンクリックで登録

[ textbox ] : SVG の path 要素の d 属性値

[ checkbox ] : 描画の縦横比

[ add ] : textbox にある path 要素の d 属性値を取り込みます。(3つまで保持、以降は順に上書きします)

[ set ] : textbox にある path 要素の d 属性値を取り込みます。(click ごとに上書きします)

[ ⫯⃕ ] アイコン時、パスを選択後、制御点の移動ができます。
パス選択 : 外枠クリック(ボーダー)
パス選択解除 : canvas ダブルクリック

*)制御点の移動が出来るのは (add | set) 登録した path のみです。
*)描画は stroke のみです。
*)path 要素 d 属性値は、
inkscape の設定 > 入力出力 > SVG出力 > パスデータ

パスの文字列形式 : 最適化
強制的にコマンドを繰り出す : チェック

inkscape の XML エディタより取得した
d 属性値を ['M'] コマンドで連結したものでテストしました。
読み込めるコマンドは、 M, L, Q, C ,V, H, Z, m, l, q, c, v ,h, z です。

読み込テスト(ビャン) → http://jsdo.it/negoto/gsJK


[ アイコン長押し ] : 値変更

[ A ] : ダブルクリック フォント normal

[ ✒ ] : 入力

[ 🛇 ] : 削除

[ ⇆ ] : 移動

[ ⫯⃕ ] : 制御点移動 (canvas ダブルクリック選択解除) *1

*1)[ パス選択 ] : 外枠クリック(ボーダー)

*1)[ パス選択解除 ] : canvas ダブルクリック

*1)[ 円制御点左右リセット ] : 四角制御点 + ctrl + click

*1)[ 円制御点リセット ] : 円制御点 + ctrl + click

*1)[ 円制御点左右対象移動? ] : 四角制御点 + ctrl + click + drag


[ shape ]

[ ⌿ ] : line

[ ⧉ ] : rect

[ 🞅 ] : ellipse

[ ∿ ] : path *2

[ 𝅙 ] : text *3

*2)[ パスを閉じる ] : z ボタンクリック

*2)[ パスを閉じる ] : 始点制御点 ダブルクリック

*3)[ canvas 小 ] : ダブルクリック パス初期値

*3)[ テキスト選択状態 ] : set パス上へテキスト配置


  • 黒板 : canvas 要素 描画テスト (l)
  • 黒板 : canvas 要素 描画テスト (l)