機能概要
本デモは、@onjmin/oekaki
ライブラリのコア機能を検証するためのものです。レイヤー、アンドゥ/リドゥ、高度な描画モードなどのモダンな描画機能を、標準的なHTML5とJavaScriptのみで実現しています。
- コア機能: レイヤーシステム、元に戻す/やり直し、高精度な描画エンジン。
- 描画ツール: ペン、ブラシ、消しゴム、カラーピッカー、塗りつぶし、ハンドツールが利用可能です。
- ファイル操作: 保存（PNG形式）、クリップボードへのコピー/貼り付けに対応。
- 表示モード: グリッド線表示、描画エリアの左右反転表示をトグルできます。
- UX設計:
ツールボタンはアイコン付き、選択中のツールは強調表示（ピンク色）、カーソルも自動切り替え、ページロード時にペンツールで即時描画開始。
⚡️ 高速操作のためのショートカットキー
描画中は以下のキーボードショートカットを利用して、ツールの切り替えや操作を素早く実行できます。
ツール切り替え
描画操作
表示/モード
ファイル操作
Ctrl + 1: ブラシ
Ctrl + Z: 戻す (Undo)
Ctrl + E: 常に消しゴム
Ctrl + S: 画像を保存
Ctrl + 2: ペン
Ctrl + Shift + Z: やり直す (Redo)
Ctrl + F: 左右反転
Ctrl + C: 画像をコピー
Ctrl + 3: 消しゴム
右クリック: カラーピッカー
Ctrl + G: グリッド表示
Ctrl + V: 画像を貼り付け
Ctrl + 4: カラーピッカー
Ctrl + 5: 塗りつぶし
Ctrl + 6: ハンドツール
✨ 上級者向けのライブラリ活用法（裏技）
これらの裏技は、@onjmin/oekaki の持つ高度な描画エンジンの可能性を示しています。
- ドット絵モード: 【グリッド表示 + ペン】
を使用し、ツールオプションのスライダーでドットサイズを調整すると、正確なドット絵を描画できます。
- 透明化塗りつぶし: 【常に消しゴム + 塗りつぶし】
を実行すると、既存の色を透明色（RGBA[0,0,0,0]）に置き換え、効率的に領域をクリアできます。
- 精密移動: 【グリッド表示 + ハンドツール + ペンサイズ最大】
を組み合わせると、レイヤーをドット単位で正確に移動させることができます。
- 残像生成: 【コピー + レイヤー追加 + 貼り付け】
後、レイヤーパネルで半透明化を行うと、視覚的な残像効果を作成できます。