Gデプロイ用
This commit is contained in:
ry.yamafuji
parent
325081773b
commit
e6bd36e947
97
README.jp.md
Normal file
97
README.jp.md
Normal file
@ -0,0 +1,97 @@
|
||||
# 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
|
||||
173
README.md
173
README.md
@ -1,74 +1,99 @@
|
||||
# imagemarkpengent
|
||||
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Install & Build
|
||||
|
||||
1. Install dependencies
|
||||
```sh
|
||||
yarn install
|
||||
```
|
||||
2. Build
|
||||
```sh
|
||||
yarn compile
|
||||
```
|
||||
3. Press F5 to launch in debug mode
|
||||
|
||||
---
|
||||
|
||||
## License
|
||||
MIT License
|
||||
@ -3,7 +3,7 @@
|
||||
"displayName": "ImageMarkPengent",
|
||||
"description": "",
|
||||
"license": "MIT",
|
||||
"version": "0.0.1",
|
||||
"version": "1.0.0-alpha",
|
||||
"engines": {
|
||||
"vscode": "^1.99.0"
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user