KonvaのTransformerのオプションを一通り試してみる

はじめに

KonvaのTransformerは図形を変形するグループです。
移動・拡大縮小・回転などができます。

KonvaのTransformerを触ってみて、anckerとかresize, rotateとか色々便利な機能があったので他にはどんなものがあるのか気になりまとめてみました。
こういうオプション一覧ってパッと見で何をするものなのか分かりずらいので😢
https://konvajs.org/api/Konva.Transformer.html

オプション

• resizeEnabled
  拡大縮小するサイズ変更機能の表示・非表示（type: boolean）

resizeEnabled={fasle}

• rotateEnabled
  回転機能の表示・非表示（type: boolean）

rotateEnabled={false}

• rotateLineVisible, borderEnabled
  回転アンカーと図形をつなぐ線の表示・非表示（type: boolean）

rotateLineVisible={false}

• rotationSnaps
  回転時にスナップする角度を指定する（type: Array）

 rotationSnaps={[0,90,180,270]}

• rotationSnapTolerance
  回転でスナップする許容値の角度を設定する（type: number）

 rotationSnapTolerance={30}

• rotateAnchorOffset
  回転アンカーと図形の距離を指定する（type: number）

rotateAnchorOffset={20}

• rotateAnchorCursor
  回転した際のカーソルの種類を指定する（type: string）
  grab, crosshair, move..

rotateAnchorCursor={'grab'}

スクリーンショットだと強制でカーソルなので撮れませんでした😢

• padding
  Transformerと図形のパディングを設定する（type: number）

padding={10}

• borderStroke
  枠線の色を指定する（type: string）

borderStroke={'red'}

• borderStrokeWidth
  枠線の太さを指定する（type: number）

borderStrokeWidth={5}

• borderDash
  枠線の点線の間隔を指定する（type: Array）

borderDash={[2,2]}

• anchorFill
  アンカーの色を塗りつぶす（type: string）

anchorFill={'red'}

• anchorStroke
  アンカーの枠線の色を指定する（type: string）

anchorStroke={'red'}

• anchorCornerRadius
  アンカーの丸みを指定する（type: number）

anchorCornerRadius={5}

• anchorStrokeWidth
  アンカーの枠線の太さを指定する（type: number）

anchorStrokeWidth={3}

• anchorSize
  アンカーのサイズを変えます（type: number）

anchorSize={20}

• keepRatio
• shiftBehavior
• centeredScaling
• enabledAnchors
  図形を変形する際のアンカーを配列で指定します。（type: Array）

enabledAnchors={['top-left', 'top-center', 'top-right', 'middle-right', 'middle-left', 'bottom-left', 'bottom-center', 'bottom-right']}

enabledAnchors={[
            "top-left",
            "top-right",
            "bottom-left",
            "bottom-right",
          ]}

• boundBoxFunc
  動作の制限や変更をするときの関数を設定する。（type: func）
  これは拡大する際の大きさを100以内に制限するようにしています

boundBoxFunc={(oldBox, newBox) => {
            if (newBox.width > 100) {
              return oldBox;
            }
            return newBox;
          }}

• useSingleNodeRotation
  図形の回転初期値でtransFormerの枠線を設定します（type: boolean）

useSingleNodeRotation={true}

useSingleNodeRotation={false}

以上です。
大きなデザイン変更などはできませんが、最低限のオプションは揃えているなという印象でした。