canvas-drawing-editor 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +265 -0
  2. package/dist/image-editor.css +1 -0
  3. package/dist/image-editor.es.js +28542 -0
  4. package/dist/image-editor.es.js.map +1 -0
  5. package/dist/image-editor.umd.js +276 -0
  6. package/dist/image-editor.umd.js.map +1 -0
  7. package/dist/index.d.ts +111 -0
  8. package/package.json +62 -0
package/README.md ADDED
@@ -0,0 +1,265 @@
1
+ # Canvas Image Editor
2
+
3
+ [English](#english) | [中文](#中文)
4
+
5
+ ---
6
+
7
+ <a name="english"></a>
8
+ ## English
9
+
10
+ A powerful canvas-based image editor Web Component that works with **Vue**, **React**, **Angular**, and **vanilla HTML**.
11
+
12
+ ### ✨ Features
13
+
14
+ - 🎨 **Drawing Tools** - Pencil, Rectangle, Circle, Text
15
+ - 🖼️ **Image Support** - Import and manipulate images
16
+ - 🔍 **Zoom & Pan** - Mouse wheel zoom centered on cursor, drag to pan
17
+ - 🗺️ **Minimap** - Navigation minimap for quick positioning
18
+ - 💾 **Import/Export** - Save and load projects as JSON, export as PNG
19
+ - ⚡ **Framework Agnostic** - Works with any framework or vanilla HTML
20
+ - 🎛️ **Configurable** - Show/hide any tool via configuration
21
+
22
+ ### 📦 Installation
23
+
24
+ ```bash
25
+ npm install canvas-image-editor
26
+ ```
27
+
28
+ ### 🚀 Usage
29
+
30
+ #### Vanilla HTML
31
+
32
+ ```html
33
+ <!DOCTYPE html>
34
+ <html>
35
+ <head>
36
+ <link rel="stylesheet" href="node_modules/canvas-image-editor/dist/image-editor.css">
37
+ </head>
38
+ <body>
39
+ <image-editor title="My Canvas" show-minimap="true"></image-editor>
40
+
41
+ <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
42
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
43
+ <script src="node_modules/canvas-image-editor/dist/image-editor.umd.js"></script>
44
+ </body>
45
+ </html>
46
+ ```
47
+
48
+ #### Vue 3
49
+
50
+ ```vue
51
+ <template>
52
+ <image-editor
53
+ :title="'Vue Canvas'"
54
+ :show-minimap="true"
55
+ ></image-editor>
56
+ </template>
57
+
58
+ <script setup>
59
+ import 'canvas-image-editor';
60
+ import 'canvas-image-editor/style.css';
61
+ </script>
62
+ ```
63
+
64
+ **Note:** Add to `vite.config.ts`:
65
+ ```ts
66
+ export default defineConfig({
67
+ vue: {
68
+ template: {
69
+ compilerOptions: {
70
+ isCustomElement: (tag) => tag === 'image-editor'
71
+ }
72
+ }
73
+ }
74
+ });
75
+ ```
76
+
77
+ #### React
78
+
79
+ ```tsx
80
+ import { useEffect, useRef } from 'react';
81
+ import 'canvas-image-editor';
82
+ import 'canvas-image-editor/style.css';
83
+
84
+ function App() {
85
+ return <image-editor title="React Canvas" show-minimap={true} />;
86
+ }
87
+ ```
88
+
89
+ ### ⚙️ Configuration
90
+
91
+ | Attribute | Type | Default | Description |
92
+ |-----------|------|---------|-------------|
93
+ | `title` | string | "Canvas Editor" | Editor title |
94
+ | `show-pencil` | boolean | true | Show pencil tool |
95
+ | `show-rectangle` | boolean | true | Show rectangle tool |
96
+ | `show-circle` | boolean | true | Show circle tool |
97
+ | `show-text` | boolean | true | Show text tool |
98
+ | `show-image` | boolean | true | Show image import |
99
+ | `show-zoom` | boolean | true | Show zoom controls |
100
+ | `show-download` | boolean | true | Show PNG export |
101
+ | `show-export` | boolean | true | Show JSON save |
102
+ | `show-import` | boolean | true | Show JSON load |
103
+ | `show-color` | boolean | true | Show color picker |
104
+ | `show-minimap` | boolean | true | Show navigation minimap |
105
+
106
+ ### 📡 Events
107
+
108
+ ```javascript
109
+ // Listen for canvas changes
110
+ document.addEventListener('editor-change', (e) => {
111
+ console.log('Objects:', e.detail.objects);
112
+ });
113
+
114
+ // Listen for editor close
115
+ document.addEventListener('editor-close', () => {
116
+ console.log('Editor closed');
117
+ });
118
+ ```
119
+
120
+ ### 🛠️ Development
121
+
122
+ ```bash
123
+ # Install dependencies
124
+ npm install
125
+
126
+ # Start dev server
127
+ npm run dev
128
+
129
+ # Build library
130
+ npm run build:lib
131
+ ```
132
+
133
+ ---
134
+
135
+ <a name="中文"></a>
136
+ ## 中文
137
+
138
+ 一个强大的基于 Canvas 的图片编辑器 Web Component，支持 **Vue**、**React**、**Angular** 和**原生 HTML**。
139
+
140
+ ### ✨ 功能特性
141
+
142
+ - 🎨 **绑图工具** - 画笔、矩形、圆形、文本
143
+ - 🖼️ **图片支持** - 导入和编辑图片
144
+ - 🔍 **缩放平移** - 鼠标滚轮以光标为中心缩放，拖拽平移画布
145
+ - 🗺️ **导航地图** - 小地图快速定位
146
+ - 💾 **导入导出** - JSON 格式保存/加载项目，PNG 格式导出
147
+ - ⚡ **框架无关** - 支持任何框架或原生 HTML
148
+ - 🎛️ **可配置** - 通过配置显示/隐藏任意工具
149
+
150
+ ### 📦 安装
151
+
152
+ ```bash
153
+ npm install canvas-image-editor
154
+ ```
155
+
156
+ ### 🚀 使用方法
157
+
158
+ #### 原生 HTML
159
+
160
+ ```html
161
+ <!DOCTYPE html>
162
+ <html>
163
+ <head>
164
+ <link rel="stylesheet" href="node_modules/canvas-image-editor/dist/image-editor.css">
165
+ </head>
166
+ <body>
167
+ <image-editor title="我的画板" show-minimap="true"></image-editor>
168
+
169
+ <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
170
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
171
+ <script src="node_modules/canvas-image-editor/dist/image-editor.umd.js"></script>
172
+ </body>
173
+ </html>
174
+ ```
175
+
176
+ #### Vue 3
177
+
178
+ ```vue
179
+ <template>
180
+ <image-editor
181
+ :title="'Vue 画板'"
182
+ :show-minimap="true"
183
+ ></image-editor>
184
+ </template>
185
+
186
+ <script setup>
187
+ import 'canvas-image-editor';
188
+ import 'canvas-image-editor/style.css';
189
+ </script>
190
+ ```
191
+
192
+ **注意：** 在 `vite.config.ts` 中添加：
193
+ ```ts
194
+ export default defineConfig({
195
+ vue: {
196
+ template: {
197
+ compilerOptions: {
198
+ isCustomElement: (tag) => tag === 'image-editor'
199
+ }
200
+ }
201
+ }
202
+ });
203
+ ```
204
+
205
+ #### React
206
+
207
+ ```tsx
208
+ import { useEffect, useRef } from 'react';
209
+ import 'canvas-image-editor';
210
+ import 'canvas-image-editor/style.css';
211
+
212
+ function App() {
213
+ return <image-editor title="React 画板" show-minimap={true} />;
214
+ }
215
+ ```
216
+
217
+ ### ⚙️ 配置项
218
+
219
+ | 属性 | 类型 | 默认值 | 说明 |
220
+ |------|------|--------|------|
221
+ | `title` | string | "Canvas Editor" | 编辑器标题 |
222
+ | `show-pencil` | boolean | true | 显示画笔工具 |
223
+ | `show-rectangle` | boolean | true | 显示矩形工具 |
224
+ | `show-circle` | boolean | true | 显示圆形工具 |
225
+ | `show-text` | boolean | true | 显示文本工具 |
226
+ | `show-image` | boolean | true | 显示图片导入 |
227
+ | `show-zoom` | boolean | true | 显示缩放控制 |
228
+ | `show-download` | boolean | true | 显示 PNG 导出 |
229
+ | `show-export` | boolean | true | 显示 JSON 保存 |
230
+ | `show-import` | boolean | true | 显示 JSON 加载 |
231
+ | `show-color` | boolean | true | 显示颜色选择器 |
232
+ | `show-minimap` | boolean | true | 显示导航小地图 |
233
+
234
+ ### 📡 事件监听
235
+
236
+ ```javascript
237
+ // 监听画布内容变化
238
+ document.addEventListener('editor-change', (e) => {
239
+ console.log('对象列表:', e.detail.objects);
240
+ });
241
+
242
+ // 监听编辑器关闭
243
+ document.addEventListener('editor-close', () => {
244
+ console.log('编辑器已关闭');
245
+ });
246
+ ```
247
+
248
+ ### 🛠️ 开发
249
+
250
+ ```bash
251
+ # 安装依赖
252
+ npm install
253
+
254
+ # 启动开发服务器
255
+ npm run dev
256
+
257
+ # 构建库
258
+ npm run build:lib
259
+ ```
260
+
261
+ ---
262
+
263
+ ## 📄 License
264
+
265
+ MIT © typsusan
package/dist/image-editor.css ADDED
@@ -0,0 +1 @@
1
+ *,*:before,*:after{box-sizing:border-box}canvas{touch-action:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.animate-in,.fade-in{animation:fadeIn .2s ease-out}.slide-in-from-top-2{animation:slideInFromTop .2s ease-out}