Merge branch 'fastline'

Author: cahierchen

README.md

@@ -1,4 +1,7 @@
-# canvas-select
+# canvas-select-pro
+此仓库基于 [canvas-select](https://github.com/heylight/canvas-select) 进行扩展和改进。
+增加了网格/标尺/单要素只读/修复了一系列 bug
+
 
 一个用于图片标注的 javascript 库，基于 canvas，简单轻量，支持矩形、多边形、点、折线、圆形标注、网格标注。
 
@@ -21,22 +24,14 @@
 
 ## 🚀 安装 (Installation)
 
-您可以通过以下任一方式将 `canvas-select` 集成到您的项目中：
-
-### 通过 CDN (UMD)
-
-直接在 HTML 文件中引入：
-
-```html
-<script src="https://unpkg.com/canvas-select@^2/lib/canvas-select.min.js"></script>
-```
+您可以通过以下式将 `canvas-select-pro` 集成到您的项目中：
 
 ### 通过 npm/yarn
 
 ```bash
-npm install canvas-select --save
+npm install canvas-select-pro  --save
 # 或者
-yarn add canvas-select
+yarn add canvas-select-pro
 ```
 
 ## 🛠️ 使用方法 (Usage)

index.html

@@ -18,8 +18,7 @@
     .container {
       background-color: #ccc;
       width: 100%;
-      max-width: 400px;
-      height: 400px;
+      height: 100%;
     }
 
     .right {
@@ -61,7 +60,7 @@
   <script>
     // alert(document.body.clientWidth)
     const output = document.getElementById('output');
-    const instance = new CanvasSelect('.container', 'https://n.sinaimg.cn/www/transform/300/w660h440/20240318/3875-37fb8533570d8661d3f547c7e3b0ddde.jpg');
+    const instance = new CanvasSelect('.container', 'http://mapugcnew-1306570047.cos.ap-beijing-cdz-tmap-1.tencentcos.cn/device-image-t3/rRV5vy16p0LZxZhcBqPOtXKI_iBXywEVxoC6vdSKDuQ=/2503171414381527205/1742191492608.jpg?sign=8sMmE1Vlr8w2EzGyJu0%2BbKZ3aYVhPTEzMDY1NzAwNDcmYj1tYXB1Z2NuZXcmaz1BS0lEa1IwUGV2NDZBQkVNUWN4UG5JbTdIVWQwRVlxS3ZQakYmZT0xNzUzOTU0NzUzJnQ9MTc1Mzg2ODM1MyZyPTA0NzMwNjc5MDMmZj0%3D', { enabled: true, size: 40 });
     // instance.readonly = true
     // instance.focusMode = true
     instance.ctrlRadius = navigator.userAgent.includes('Mobile') ? 6 : 3
@@ -128,16 +127,14 @@
     instance.on('select', (info) => {
       console.log('当前选中1', info)
     });
-    instance.on('updated', (result) => {
-      console.log('标注结果', result)
-      // const list = [...result]
-      // list.sort((a, b) => a.index - b.index)
-      // output.value = JSON.stringify(list, null, 2);
-    });
     instance.on('contextmenu', () => {
       console.log('右键')
     });
 
+    instance.on('updateShape', (shape) => {
+      console.log('被更新的要素:', shape);
+    });
+
     function change(num) {
       instance.createType = num;
     }
@@ -171,4 +168,4 @@
   </script> -->
 </body>
 
-</html>
+</html>