scratchのように接続部分の形をsvgで作りたい

[Tebaeleven]

目標

調査

Scratch

どうやらScratchはpathで描画しているっぽい？

<path class="blocklyPath blocklyBlockBackground" stroke="#cc8914ff" fill="#FFAB19" fill-opacity="1" d="m 0,4 A 4,4 0 0,1 4,0 H 12 c 2,0 3,1 4,2 l 4,4 c 1,1 2,2 4,2 h 12 c 2,0 3,-1 4,-2 l 4,-4 c 1,-1 2,-2 4,-2 H 156 a 4,4 0 0,1 4,4 v 40  a 4,4 0 0,1 -4,4 H 64 c -2,0 -3,1 -4,2 l -4,4 c -1,1 -2,2 -4,2 h -12 c -2,0 -3,-1 -4,-2 l -4,-4 c -1,-1 -2,-2 -4,-2 h -8  a 4,4 0 0,0 -4,4 v 16 a 4,4 0 0,0 4,4 h  8 c 2,0 3,1 4,2 l 4,4 c 1,1 2,2 4,2 h 12 c 2,0 3,-1 4,-2 l 4,-4 c 1,-1 2,-2 4,-2 H 156 H 156 a 4,4 0 0,1 4,4 v 24  a 4,4 0 0,1 -4,4 H 4 a 4,4 0 0,1 -4,-4 z"></path>

[Tebaeleven]

実験

試しにpathをコピーしてみた。

[Tebaeleven]

わかったこと

• pathはsvgエリアで使用できる
• svgのrectなどよりも複雑な図形を描画することができる
• pathはコマンドで図形を描画する

  疑問

• どうやってScratchではpathのサイズを動的に変更しているのか
• pathをどうやって生成しているのか
  • ライブラリ？
• pathの操作方法(DOM)
• pathの設計方法

[Tebaeleven]

blocklyの描画について調査

https://blocklycodelabs.dev/codelabs/custom-renderer/index.html?index=..%2F..index#6

• 独自関数でpathを記述するらしい。よくわかってはいないが、pathは順番関係なく部分部分で描画できそう。ならば、各状態を持っておいて、それらを必要な部分だけ移動させるのが良さそう？
  • そうすると、fillや接合部分どどうマージするかなども考える必要あり

    プログラム

    /**
    * Since input and output connections share the same shape you can define
    * a function to generate the path for both.
    *
    * @param dir Multiplier for the vertical direction of the path (-1 or 1)
    * @returns SVGPath line for use with input and output connections.
    */

    
    「入力」と「出力」の接続部分は同じ形状を共有しているため、それらのためにパスを生成する関数を定義できます。

@param dir パスの垂直方向の乗数（-1または1） @returns 入力と出力の接続に使用するためのSVGPathライン。

[Tebaeleven]

svgのpathについて調査

https://qiita.com/takeshisakuma/items/777e3cb0a54ea7b1dbe7#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89

[Tebaeleven]

動的にサイズが変更できる謎

https://user-images.githubusercontent.com/73474645/236386051-a1b7d646-d10e-47a8-ae63-4256f9c8c067.mov inputに入れるとサイズが変更できるもの。全てpathで書かれているのに、どうやってうまい具合にサイズを変更しているのだろうか。

• 一つ一つコンポーネントにしてそれを合体させている
  • サイズが変わった時に動かす必要があるコンポーネントだけ動かす
  • コンポーネントが独立しているので操作が楽
  • ただ、それをうまく合体させることができるかは謎