diff --git a/README.jp.md b/README.jp.md new file mode 100644 index 0000000..d9029cd --- /dev/null +++ b/README.jp.md @@ -0,0 +1,97 @@ +# ImageMarkPengent + +VSCodeで画像に赤丸マークや注釈を直感的に描き込める拡張機能です。 + +--- + +## 主な特徴 + +- PNG/JPG画像をVSCode上で直接開いて赤丸マークを描画 +- マークの色・太さ変更、移動、拡大縮小、削除、Undo/Redo +- 画像として保存(元画像サイズで赤マーク合成) +- 直感的なUI・ショートカット + +--- + +## スクリーンショット + +![トップ画面](readme/images/top.png) + +--- + +## 使い方 + +### 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. 複数選択には未対応ですが、今後拡張予定です。 + +--- + +## サンプル画像 + +![サンプル画像](examples/sample_640x480.png) + +--- + +## インストール・ビルド + +1. 依存パッケージインストール + ```sh + yarn install + ``` +2. ビルド + ```sh + yarn compile + ``` +3. F5キーでデバッグ実行 + +--- + +## ライセンス +MIT License diff --git a/README.md b/README.md index 4a26628..41743e9 100644 --- a/README.md +++ b/README.md @@ -1,74 +1,99 @@ -# imagemarkpengent - - -![alt text](./readme/images/top.png) - -This is the README for your extension "imagemarkpengent". After writing up a brief description, we recommend including the following sections. - -## Features - -Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file. - -For example if there is an image subfolder under your extension project workspace: - -\!\[feature X\]\(images/feature-x.png\) - -> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow. - -## Requirements - -If you have any requirements or dependencies, add a section describing those and how to install and configure them. - -## Extension Settings - -Include if your extension adds any VS Code settings through the `contributes.configuration` extension point. - -For example: - -This extension contributes the following settings: - -* `myExtension.enable`: Enable/disable this extension. -* `myExtension.thing`: Set to `blah` to do something. - -## Known Issues - -Calling out known issues can help limit users opening duplicate issues against your extension. - -## Release Notes - -Users appreciate release notes as you update your extension. - -### 1.0.0 - -Initial release of ... - -### 1.0.1 - -Fixed issue #. - -### 1.1.0 - -Added features X, Y, and Z. - ---- - -## Following extension guidelines - -Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension. - -* [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines) - -## Working with Markdown - -You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts: - -* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux). -* Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux). -* Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets. - -## For more information - -* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown) -* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/) - -**Enjoy!** +[日本語のREADMEはこちら](./README.jp.md) + +# ImageMarkPengent + +A VSCode extension for intuitively drawing red circle marks and annotations directly on images. + +--- + +## Features + +- Draw red circle marks directly on PNG/JPG images in VSCode +- Change mark color/line width, move, resize, delete, Undo/Redo +- Save as image (red marks merged at original image size) +- Intuitive UI and keyboard shortcuts + +--- + +## Screenshot + +![Top Screen](readme/images/top.png) + +--- + +## How to Use + +### 1. Open an Image +- Right-click a PNG/JPG image in the Explorer → `Open in ImageMarkPengent` +- Or run `ImageMarkPengent: Open in ImageMarkPengent` from the Command Palette + +### 2. Draw a Mark +- Click the "Add Mark" button (or Ctrl+drag) +- Drag on the image to draw a red circle + +### 3. Edit Marks +- Click the "Select Mode" button to select a mark +- For the selected mark: + - Drag to move + - Drag the corner handles to resize + - Change color/line width from the toolbar + - Delete with the Delete key +- Undo (Ctrl+Z) and Redo (Ctrl+Y) are available + +### 4. Save the Image +- Click the "Save" button +- Choose a file name and location; the image will be saved as PNG with red marks at the original size + +--- + +## Toolbar Guide + +- **Move Mode**: Scroll/zoom the image +- **Select Mode**: Select and edit marks +- **Add Mark**: Add a new red circle mark +- **Line Width/Color**: Change the mark's line width and color +- **Save**: Save the edited image + +--- + +## Keyboard Shortcuts + +- Ctrl+drag: Temporarily add a mark +- Delete/Backspace: Delete selected mark +- Ctrl+Z: Undo +- Ctrl+Y: Redo +- Esc: Return to Move Mode + +--- + +## FAQ + +- **Q. Will the original image be overwritten?** + - A. You can specify a new file name when saving. The original image is not changed. +- **Q. Can I edit multiple marks at once?** + - A. Multi-selection is not supported yet, but is planned for future updates. + +--- + +## Sample Image + +![Sample Image](examples/sample_640x480.png) + +--- + +## Install & Build + +1. Install dependencies + ```sh + yarn install + ``` +2. Build + ```sh + yarn compile + ``` +3. Press F5 to launch in debug mode + +--- + +## License +MIT License \ No newline at end of file diff --git a/package.json b/package.json index 7fa098f..98a9579 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "displayName": "ImageMarkPengent", "description": "", "license": "MIT", - "version": "0.0.1", + "version": "1.0.0-alpha", "engines": { "vscode": "^1.99.0" },