100 lines
2.5 KiB
Markdown
100 lines
2.5 KiB
Markdown
# ImageMarkPengent
|
||
|
||
VSCodeで画像に赤丸マークや注釈を直感的に描き込める拡張機能です。
|
||
|
||
|
||
|
||
---
|
||
|
||
## 主な特徴
|
||
|
||
- PNG/JPG画像をVSCode上で直接開いて赤丸マークを描画
|
||
- マークの色・太さ変更、移動、拡大縮小、削除、Undo/Redo
|
||
- 画像として保存（元画像サイズで赤マーク合成）
|
||
- 直感的なUI・ショートカット
|
||
|
||
---
|
||
|
||
## スクリーンショット
|
||
|
||
|
||
|
||
---
|
||
|
||
## 使い方
|
||
|
||
### 1. 画像を開く
|
||
- エクスプローラーでPNG/JPG画像を右クリック → `Open in ImageMarkPengent`
|
||
- またはコマンドパレットで `ImageMarkPengent: Open in ImageMarkPengent` を実行
|
||
|
||
### 2. マークを描く
|
||
- 「マーク追加」ボタンを押す（またはCtrlを押しながらドラッグ）
|
||
- 画像上でドラッグして赤丸を描画
|
||
|
||
### 3. マークの編集
|
||
- 「選択モード」ボタンでマークを選択
|
||
- 選択したマークは：
|
||
- ドラッグで移動
|
||
- 四隅のハンドルをドラッグで拡大縮小
|
||
- 色・太さをツールバーで変更
|
||
- Deleteキーで削除
|
||
- Undo（Ctrl+Z）、Redo（Ctrl+Y）も可能
|
||
|
||
### 4. 画像の保存
|
||
- 「保存」ボタンを押す
|
||
- ファイル名・保存先を選択し、元画像サイズで赤マーク付き画像をPNGで保存
|
||
|
||
---
|
||
|
||
## ツールバーの説明
|
||
|
||
- **移動モード**：画像のスクロールやズーム
|
||
- **選択モード**：マークの選択・編集
|
||
- **マーク追加**：赤丸マークを新規追加
|
||
- **太さ・色**：マークの線の太さ・色を変更
|
||
- **保存**：加工画像を保存
|
||
|
||
---
|
||
|
||
## ショートカット
|
||
|
||
- Ctrl+ドラッグ：一時的にマーク追加
|
||
- Delete/Backspace：選択中マーク削除
|
||
- Ctrl+Z：Undo（元に戻す）
|
||
- Ctrl+Y：Redo（やり直し）
|
||
- Esc：移動モードに戻る
|
||
|
||
---
|
||
|
||
## よくある質問
|
||
|
||
- **Q. 元画像は上書きされますか？**
|
||
- A. 保存時は新しいファイル名を指定できます。元画像は変更されません。
|
||
- **Q. 複数のマークを同時に編集できますか？**
|
||
- A. 複数選択には未対応ですが、今後拡張予定です。
|
||
|
||
---
|
||
|
||
## サンプル画像
|
||
|
||
|
||
|
||
---
|
||
|
||
## インストール・ビルド
|
||
|
||
1. 依存パッケージインストール
|
||
```sh
|
||
yarn install
|
||
```
|
||
2. ビルド
|
||
```sh
|
||
yarn compile
|
||
```
|
||
3. F5キーでデバッグ実行
|
||
|
||
---
|
||
|
||
## ライセンス
|
||
MIT License
|