Shapora

画像ノード

画像ノードは、ラスター画像(PNG/JPEG/GIF)をキャンバスに表示するノードです。

画像ノードは常に「オリジナル画像」と「最新の加工済み画像」の2つだけを保持します。プロパティパネルのプレビューは常にオリジナル画像を表示し、キャンバスは加工済み画像があればそれを、なければオリジナル画像を表示します。

画像の追加

画像ファイルをキャンバス上にドラッグ&ドロップすると画像ノードとして追加されます。アイコンライブラリからPNGアイコンをドロップした場合も画像ノードとして追加されます。

画像ファイルをドロップして追加した画像ノードは、画像の元サイズで作成されます。必要に応じてプロパティパネルや角ハンドルで自由にサイズを調整できます。

対応ファイル形式

形式備考
PNG透明度(アルファチャンネル)対応
JPEG写真・グラデーション画像向き
GIFアニメーションはエクスポート時に静止画になります

SVGアイコン(svgノード)との違い

  • 画像ノード: PNG/JPEG/GIF などのラスター画像を保持します
  • SVGノード: 外部SVGファイルをドロップしたときに作成され、SVGドキュメント文字列を保持します
  • builtinノード: アイコンライブラリからSVGアイコンをドロップしたときに作成され、SVG本体ではなくアイコンパスを保持します
💡 SVGファイル(ドキュメントデータなし)をキャンバスにドロップすると、SVGノードとして追加されます。ドキュメントデータが埋め込まれたSVGをドロップすると、ドキュメント全体が復元されます。

切り抜き

  • 画像ノードとSVGノードは、プロパティパネルの「切り抜き」から切り抜き範囲を設定できます
  • 切り抜きダイアログでは画像全体を表示し、切り抜き枠をドラッグして移動、四隅のハンドルで範囲を調整できます
  • 切り抜き形状は矩形または円を選択できます。円を選ぶとキャンバス上でもエクスポートでも円形マスクとして描画されます
  • 切り抜き後も元データはドキュメントに残り、「切り抜きを再設定」から同じ元データに対して範囲を変更できます
  • 画像ノードで背景除去やマジック消しゴムを実行済みの場合、切り抜きダイアログには現在キャンバスに表示中の加工済み画像が表示されます
  • 切り抜いた内容のボックス内表示は preserveAspectRatio の設定(描画モード・X配置・Y配置)に従います

画像の輪郭

  • 画像ノードを選択すると、プロパティパネルで矩形ノードと同じ背景塗り(なし / 単色 / 線形グラデーション / 円形グラデーション / チェッカー / ドット)を設定できます
  • 線形グラデーションと円形グラデーションは、矩形ノードと同じようにキャンバス上のグラデーションハンドルで位置や半径を調整できます
  • 背景塗りは画像の背面に描画されるため、透明PNGや切り抜き画像の余白部分に表示されます
  • 切り抜き済み画像では、背景塗りも矩形または円形の切り抜きクリップ境界の内側だけに描画されます
  • 画像ノードを選択すると、プロパティパネルで輪郭線のON/OFF、色、幅、線種を設定できます
  • 輪郭をOFFにしてから再度ONにした場合も、直前の輪郭幅・色・線種が保持されます
  • 通常表示では画像ボックスの外周に輪郭線が描画されます
  • 切り抜き済み画像では、矩形または円形の切り抜きクリップ境界に沿って輪郭線が描画されます

背景除去

  • 画像ノードを選択してプロパティパネルの「背景を除去」を押すと、クライアント側で背景除去を実行します
  • モデル未取得時は最初の実行で Hugging Face からモデルをダウンロードし、処理中は操作ボタンにローディングスピナーが表示されます
  • 背景除去を実行したあとも「画像を復元」で背景除去前の画像に戻せます
  • 背景除去は常に現在キャンバスに表示中の画像を対象に実行されます(加工済み画像があればそれを再加工します)

マジック消しゴム

  • 画像ノードを1つ選択した状態で、プロパティパネルの「マジック消しゴム」を押すと投げ縄モードになります
  • キャンバス上をクリックして赤い半透明ポリゴンを作成し、始点を再クリックすると確定されます
  • ポリゴンと画像ノードが重なる部分だけが削除対象になります
  • プロパティパネルのプレビューには常に元画像(処理前画像)が表示されます
  • 投げ縄モード中は「マジック消しゴム」ボタンがハイライト表示され、ラベルは「範囲を確定」になります
  • 投げ縄モード中にもう一度「範囲を確定」を押すとポリゴンが確定され、処理を開始します
  • 投げ縄モード中は対象画像をドラッグ移動したり拡大縮小したりできません。四隅ハンドルは非表示になり、選択枠の点線だけが表示されます
  • 範囲を確定して処理が始まると、アクティブなツールは自動的に選択ツールへ戻ります
  • 投げ縄モード中にツールバーの別のツールボタンを押すと、その投げ縄選択はキャンセルされます
  • 投げ縄モード中・処理中は「背景を除去」ボタンが無効になります
  • いずれか1つの画像でマジック消しゴムを実行中は、他の画像を選択しても「マジック消しゴム」「背景を除去」ボタンは無効になります
  • 処理中はラベルが「マジック消しゴムを実行中」に変わり、このボタンにだけスピナーが表示されます
  • 大きい画像では、選択領域の周辺だけを優先して処理し、可能な限り画像全体の縮小を避けます
  • 「背景を除去」ボタンのスピナーは背景除去の処理中のみ表示されます
  • 「画像を復元」ボタンにスピナーは表示されません
  • 処理中に「画像を復元」を押すと、マジック消しゴムを中止して最初の元画像へ戻します
  • 処理後は「画像を復元」で常に最初の元画像へ戻せます
  • 復元後に再度マジック消しゴムを実行でき、同じ画像に対して何度でもやり直せます