@wbiokr/arrow 0.0.1 → 0.0.4

package/README.md

@@ -0,0 +1,136 @@
+# @wbiokr/arrow
+
+箭头绘制编辑器 - 在网页上绘制可编辑的箭头
+
+## 安装
+
+```bash
+npm install @wbiokr/arrow
+```
+
+## 快速开始
+
+### HTML
+
+```html
+<div id="container"></div>
+```
+
+### CSS（可选）
+
+```css
+#container {
+  position: relative;
+  width: 1000px;
+  height: 600px;
+  background: #fff;
+  margin: 50px auto;
+}
+```
+
+### JavaScript
+
+```javascript
+import { ArrowEditor } from '@wbiokr/arrow'
+
+const editor = new ArrowEditor('#container')
+```
+
+## 使用方法
+
+### 绘制箭头
+
+1. 点击空白处开始绘制
+2. 移动鼠标添加拐点
+3. 双击或按 `Enter` 完成绘制
+4. 按 `Esc` 取消绘制
+
+### 曲线模式
+
+按住 `Ctrl` 或 `Shift` 键绘制曲线箭头
+
+### 移动箭头
+
+1. 点击箭头选中
+2. 拖拽移动箭头
+
+### 旋转箭头
+
+1. 点击箭头选中
+2. 拖拽顶部的橙色旋转手柄
+
+### 缩放箭头
+
+1. 点击箭头选中
+2. 拖拽右下角的蓝色缩放手柄
+
+### 取消选中
+
+点击空白处或按 `Esc` 键
+
+## API
+
+### 实例化
+
+```javascript
+const editor = new ArrowEditor(container)
+```
+
+- `container`: CSS 选择器字符串或 DOM 元素
+
+### 方法
+
+#### getData()
+
+获取所有箭头数据
+
+```javascript
+const data = editor.getData()
+// 返回：[{ points: [{x, y}, ...], isCurve: boolean }, ...]
+```
+
+#### setData(data)
+
+设置箭头数据
+
+```javascript
+editor.setData([
+  {
+    points: [{ x: 100, y: 100 }, { x: 200, y: 200 }],
+    isCurve: false
+  }
+])
+```
+
+#### clear()
+
+清空所有箭头
+
+```javascript
+editor.clear()
+```
+
+## 键盘快捷键
+
+| 快捷键 | 功能 |
+|--------|------|
+| `Enter` | 完成绘制 |
+| `Esc` | 取消绘制 / 取消选中 |
+| `Ctrl` / `Shift` | 曲线模式（按住） |
+
+## 开发
+
+```bash
+npm install
+npm run dev
+```
+
+## 打包
+
+```bash
+npm run build
+```
+
+## License
+
+MIT