テキストノード
テキストノードは、自由に配置・リサイズできるテキストボックスです。日本語を含む任意の文字列を入力でき、フォント・サイズ・色・配置・ふきだしスタイルなどを細かく設定できます。言語ごとのテキスト設定(default / ja / en)にも対応しています。
多言語テキスト設定
- プロパティパネル上部の「テキスト言語」で、default / 日本語(ja)/ 英語(en)を切り替え(設定済み言語は ✓ 表示)
- 新規ドキュメント作成時の初期選択は default
- 言語ごとに content・fontFamily・fontSize・fontWeight・fontStyle を個別に保持
- 選択中言語のデータが未作成なら、表示は default を使用
- ja / en を初めて作るときは、default の現在値をコピーして生成
- ゴミ箱ボタンで選択中言語(default 以外)の設定を削除。削除後は選択が default に戻る
- 多言語ドロップダウンの現在選択はドキュメントデータに保存され、再読み込み後も復元される
- SVGの switch/systemLanguage では、ブラウザの優先言語設定に一致した最初の言語が表示される。期待どおりに表示されない場合はブラウザの言語設定を確認する
- エクスポートパネルで switch ON の言語が出力対象になる。対象言語のデータがない場合は、その言語に default の内容がフォールバックされる
テキストボックスの作成
ツールバーの「テキストボックス描画」ツール(ペンアイコン)を選択し、キャンバス上をドラッグすると新しいテキストボックスが作成されます。
テキストの編集
テキストボックスをダブルクリックすると編集モードになり、テキストを入力・変更できます。編集モードをOFFにするにはノード外をクリックするか Esc キーを押します。
フォント設定
- フォントファミリー: 組み込みローカルフォント(Noto Sans JP / Cine Caption 226)と Google Fonts から選択可能。右のアイコンをクリックするとフォントピッカーが開きます
- フォントサイズ: 数値入力または +/- ボタンで変更。右クリックでプリセット一覧から選択
- 太字 / 斜体 / 取り消し線: トグルボタンで切り替え
- 文字色: カラーピッカーで設定
テキスト配置
| 種類 | 選択肢 |
|---|---|
| 水平配置 | 左揃え / 中央揃え / 右揃え / 両端揃え |
| 垂直配置 | 上揃え / 中央揃え / 下揃え |
ボックスのスタイル
- スタイル: 「矩形」または「ふきだし」から選択
- 背景色: 塗り色(透明も設定可)
- 枠色・枠太さ: テキストボックスの外枠
- 新規作成時の枠太さの初期値: 0
- 内側余白 (padding): テキストとボックス縁の間隔
- 行送り倍率: 0.5〜4 の範囲で行間を調整
- 角丸: ボックスの角を丸くする半径
- 影: 色・濃さ・X/Yオフセット・ぼかしの4パラメータ
ふきだしスタイル
スタイルを「ふきだし」にすると、ボックスからヒゲ(tail)が伸びたふきだし形状になります。
- ノードを選択すると、ヒゲの付け根と先端にハンドルが表示されます。ハンドルをドラッグしてヒゲの形状を自由に調整できます。
- ヒゲ先端のハンドルを現在の辺の外側(別の辺の方向)にドラッグすると、ヒゲが出る辺を切り替えることができます。
💡 複数のテキストボックスを選択して操作すると、フォント・色・サイズなどを一括変更できます。最後に選択したボックスの値がコントロールに表示されます。