canvas-drawing-editor 1.0.0 → 2.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 (12) hide show
  1. package/README.md +91 -39
  2. package/dist/canvas-drawing-editor.es.js +1143 -0
  3. package/dist/canvas-drawing-editor.es.js.map +1 -0
  4. package/dist/canvas-drawing-editor.umd.js +450 -0
  5. package/dist/canvas-drawing-editor.umd.js.map +1 -0
  6. package/dist/index.d.ts +102 -49
  7. package/package.json +14 -21
  8. package/dist/image-editor.css +0 -1
  9. package/dist/image-editor.es.js +0 -28542
  10. package/dist/image-editor.es.js.map +0 -1
  11. package/dist/image-editor.umd.js +0 -276
  12. package/dist/image-editor.umd.js.map +0 -1
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # Canvas Image Editor
1
+ # Canvas Drawing Editor
2
2
 
3
3
  [English](#english) | [中文](#中文)
4
4
 
@@ -7,7 +7,7 @@
7
7
  <a name="english"></a>
8
8
  ## English
9
9
 
10
- A powerful canvas-based image editor Web Component that works with **Vue**, **React**, **Angular**, and **vanilla HTML**.
10
+ A powerful canvas-based drawing editor Web Component with **zero dependencies**. Works with **Vue 2/3**, **React**, **Angular**, and **vanilla HTML**.
11
11
 
12
12
  ### ✨ Features
13
13
 
@@ -16,13 +16,14 @@ A powerful canvas-based image editor Web Component that works with **Vue**, **Re
16
16
  - 🔍 **Zoom & Pan** - Mouse wheel zoom centered on cursor, drag to pan
17
17
  - 🗺️ **Minimap** - Navigation minimap for quick positioning
18
18
  - 💾 **Import/Export** - Save and load projects as JSON, export as PNG
19
- - ⚡ **Framework Agnostic** - Works with any framework or vanilla HTML
19
+ - ⚡ **Zero Dependencies** - Pure JavaScript, no React/Vue required
20
20
  - 🎛️ **Configurable** - Show/hide any tool via configuration
21
+ - 📦 **Lightweight** - ~10KB gzipped
21
22
 
22
23
  ### 📦 Installation
23
24
 
24
25
  ```bash
25
- npm install canvas-image-editor
26
+ npm install canvas-drawing-editor
26
27
  ```
27
28
 
28
29
  ### 🚀 Usage
@@ -33,14 +34,14 @@ npm install canvas-image-editor
33
34
  <!DOCTYPE html>
34
35
  <html>
35
36
  <head>
36
- <link rel="stylesheet" href="node_modules/canvas-image-editor/dist/image-editor.css">
37
+ <style>
38
+ canvas-drawing-editor { width: 100%; height: 600px; display: block; }
39
+ </style>
37
40
  </head>
38
41
  <body>
39
- <image-editor title="My Canvas" show-minimap="true"></image-editor>
42
+ <canvas-drawing-editor title="My Canvas" show-minimap="true"></canvas-drawing-editor>
40
43
 
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
+ <script src="https://unpkg.com/canvas-drawing-editor/dist/canvas-drawing-editor.umd.js"></script>
44
45
  </body>
45
46
  </html>
46
47
  ```
@@ -49,15 +50,15 @@ npm install canvas-image-editor
49
50
 
50
51
  ```vue
51
52
  <template>
52
- <image-editor
53
- :title="'Vue Canvas'"
54
- :show-minimap="true"
55
- ></image-editor>
53
+ <canvas-drawing-editor
54
+ title="Vue Canvas"
55
+ show-minimap="true"
56
+ style="width: 100%; height: 600px;"
57
+ ></canvas-drawing-editor>
56
58
  </template>
57
59
 
58
60
  <script setup>
59
- import 'canvas-image-editor';
60
- import 'canvas-image-editor/style.css';
61
+ import 'canvas-drawing-editor';
61
62
  </script>
62
63
  ```
63
64
 
@@ -67,22 +68,47 @@ export default defineConfig({
67
68
  vue: {
68
69
  template: {
69
70
  compilerOptions: {
70
- isCustomElement: (tag) => tag === 'image-editor'
71
+ isCustomElement: (tag) => tag === 'canvas-drawing-editor'
71
72
  }
72
73
  }
73
74
  }
74
75
  });
75
76
  ```
76
77
 
78
+ #### Vue 2
79
+
80
+ ```javascript
81
+ // main.js
82
+ import Vue from 'vue'
83
+
84
+ Vue.config.ignoredElements = ['canvas-drawing-editor']
85
+
86
+ import 'canvas-drawing-editor'
87
+ ```
88
+
89
+ ```vue
90
+ <template>
91
+ <canvas-drawing-editor
92
+ title="Vue2 Canvas"
93
+ show-minimap="true"
94
+ style="width: 100%; height: 600px;"
95
+ ></canvas-drawing-editor>
96
+ </template>
97
+ ```
98
+
77
99
  #### React
78
100
 
79
101
  ```tsx
80
- import { useEffect, useRef } from 'react';
81
- import 'canvas-image-editor';
82
- import 'canvas-image-editor/style.css';
102
+ import 'canvas-drawing-editor';
83
103
 
84
104
  function App() {
85
- return <image-editor title="React Canvas" show-minimap={true} />;
105
+ return (
106
+ <canvas-drawing-editor
107
+ title="React Canvas"
108
+ show-minimap="true"
109
+ style={{ width: '100%', height: '600px' }}
110
+ />
111
+ );
86
112
  }
87
113
  ```
88
114
 
@@ -135,7 +161,7 @@ npm run build:lib
135
161
  <a name="中文"></a>
136
162
  ## 中文
137
163
 
138
- 一个强大的基于 Canvas 的图片编辑器 Web Component，支持 **Vue**、**React**、**Angular** 和**原生 HTML**。
164
+ 一个强大的基于 Canvas 的画布编辑器 Web Component，**零依赖**，支持 **Vue 2/3**、**React**、**Angular** 和**原生 HTML**。
139
165
 
140
166
  ### ✨ 功能特性
141
167
 
@@ -144,13 +170,14 @@ npm run build:lib
144
170
  - 🔍 **缩放平移** - 鼠标滚轮以光标为中心缩放，拖拽平移画布
145
171
  - 🗺️ **导航地图** - 小地图快速定位
146
172
  - 💾 **导入导出** - JSON 格式保存/加载项目，PNG 格式导出
147
- - ⚡ **框架无关** - 支持任何框架或原生 HTML
173
+ - ⚡ **零依赖** - 纯 JavaScript 实现，无需 React/Vue
148
174
  - 🎛️ **可配置** - 通过配置显示/隐藏任意工具
175
+ - 📦 **轻量级** - gzip 后约 10KB
149
176
 
150
177
  ### 📦 安装
151
178
 
152
179
  ```bash
153
- npm install canvas-image-editor
180
+ npm install canvas-drawing-editor
154
181
  ```
155
182
 
156
183
  ### 🚀 使用方法
@@ -161,14 +188,14 @@ npm install canvas-image-editor
161
188
  <!DOCTYPE html>
162
189
  <html>
163
190
  <head>
164
- <link rel="stylesheet" href="node_modules/canvas-image-editor/dist/image-editor.css">
191
+ <style>
192
+ canvas-drawing-editor { width: 100%; height: 600px; display: block; }
193
+ </style>
165
194
  </head>
166
195
  <body>
167
- <image-editor title="我的画板" show-minimap="true"></image-editor>
196
+ <canvas-drawing-editor title="我的画板" show-minimap="true"></canvas-drawing-editor>
168
197
 
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>
198
+ <script src="https://unpkg.com/canvas-drawing-editor/dist/canvas-drawing-editor.umd.js"></script>
172
199
  </body>
173
200
  </html>
174
201
  ```
@@ -177,15 +204,15 @@ npm install canvas-image-editor
177
204
 
178
205
  ```vue
179
206
  <template>
180
- <image-editor
181
- :title="'Vue 画板'"
182
- :show-minimap="true"
183
- ></image-editor>
207
+ <canvas-drawing-editor
208
+ title="Vue 画板"
209
+ show-minimap="true"
210
+ style="width: 100%; height: 600px;"
211
+ ></canvas-drawing-editor>
184
212
  </template>
185
213
 
186
214
  <script setup>
187
- import 'canvas-image-editor';
188
- import 'canvas-image-editor/style.css';
215
+ import 'canvas-drawing-editor';
189
216
  </script>
190
217
  ```
191
218
 
@@ -195,22 +222,47 @@ export default defineConfig({
195
222
  vue: {
196
223
  template: {
197
224
  compilerOptions: {
198
- isCustomElement: (tag) => tag === 'image-editor'
225
+ isCustomElement: (tag) => tag === 'canvas-drawing-editor'
199
226
  }
200
227
  }
201
228
  }
202
229
  });
203
230
  ```
204
231
 
232
+ #### Vue 2
233
+
234
+ ```javascript
235
+ // main.js
236
+ import Vue from 'vue'
237
+
238
+ Vue.config.ignoredElements = ['canvas-drawing-editor']
239
+
240
+ import 'canvas-drawing-editor'
241
+ ```
242
+
243
+ ```vue
244
+ <template>
245
+ <canvas-drawing-editor
246
+ title="Vue2 画板"
247
+ show-minimap="true"
248
+ style="width: 100%; height: 600px;"
249
+ ></canvas-drawing-editor>
250
+ </template>
251
+ ```
252
+
205
253
  #### React
206
254
 
207
255
  ```tsx
208
- import { useEffect, useRef } from 'react';
209
- import 'canvas-image-editor';
210
- import 'canvas-image-editor/style.css';
256
+ import 'canvas-drawing-editor';
211
257
 
212
258
  function App() {
213
- return <image-editor title="React 画板" show-minimap={true} />;
259
+ return (
260
+ <canvas-drawing-editor
261
+ title="React 画板"
262
+ show-minimap="true"
263
+ style={{ width: '100%', height: '600px' }}
264
+ />
265
+ );
214
266
  }
215
267
  ```
216
268