测试点位

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@turf/turf": "^7.0.0",
     "@wangeditor/editor": "^5.1.18",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "echarts": "^5.5.1",
@@ -18,6 +19,7 @@
     "openseadragon": "^4.1.1",
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
+    "simplify-js": "^1.2.4",
     "socket.io-client": "^4.7.5",
     "vue": "^3.4.31",
     "vue-router": "^4.4.0",

src/pages/views/draw/assets/js/draw.js

@@ -1,13 +1,14 @@
+import { lineSplit, points, polygon, pointsWithinPolygon, lineString ,nearestPointOnLine} from "@turf/turf";
+
 class DrawCanvas {
 
   constructor() {
     this._ctx = null
     this._canvas = null
-    this._executionArr = { s: 0, e: 0, arr: [], type: 1 } //每移动一笔的数据
+    this._executionArr = { s: 0, e: 0, arr: [], type: 1, outPath: [], splitPath: null } //每移动一笔的数据
     this._pathArr = [] //抬起落下为一笔
     this._fillStyle = null // 每笔的样式
     this._matrix = new DOMMatrix() //旋转矩阵
-
   }
 
   _init({ canvas, dicTypePath = '', callBack }) {
@@ -23,12 +24,14 @@ class DrawCanvas {
     // 加个背景
     this._ctx.fillStyle = "#FFFFFF";
     this._ctx.fillRect(0, 0, canvas.width, canvas.height);
+    // 获取path上的点用svg处理
+
     // 添加路径底图 
     const path = this.sPath2cPath(dicTypePath)
     if (path) {
       this._ctx.stroke(path)
       this._ctx.clip(path) //IOS真机裁切后，导致无法画图
-      this._path = path
+      // this._executionArr.outPath = outPath
     }
     // 事件监听
     canvas.addEventListener('touchstart', this.touchStart.bind(this))
@@ -45,6 +48,7 @@ class DrawCanvas {
       this._executionArr.e = clientY - offsetTop
     }
     this._executionArr.arr = []
+    console.log('点击');
   }
 
   touchMove(event) {
@@ -56,19 +60,26 @@ class DrawCanvas {
   }
 
   touchEnd() {
-    this._pathArr.push({
-      ...this._fillStyle,
-      path: this._executionArr
-    })
+    console.log('结束', this._fillStyle, this._executionArr,this._pathArr);
+    const { arr: line, outPath, type } = this._executionArr
+    if (line.length > 2) {
+      // 画线才记录数据
+      this._pathArr.push({
+        ...this._fillStyle,
+        path: this._executionArr
+      })
+      // 开始结束自动拟合
+      
+      // 画线后切分
+      if (!type && outPath) {
+        const splitPath = lineSplit(lineString(line), outPath)
+        if(!splitPath.features.length) console.log('数据无法切分，请重画');
+        this._executionArr.splitPath = splitPath
+        console.log('画线结束,切割区域', this._pathArr);
+      }
+    }
   }
 
-  // 区域检测
-  // 当拥有圆圈的坐标和尺寸（半径）信息，我们可以利用数学方式通过简单计算来检测在任意一个圆圈上的点击。我们所需要的就是获取到鼠标点击位置的坐标信息，并且跟所有的圆圈逐一进行相交检测：
-  // https://www.cnblogs.com/hanshuai/p/14385286.html
-  isIntersect(point, circle) {
-    return Math.sqrt((point.x-circle.x) ** 2 + (point.y - circle.y) ** 2) < circle.radius;
-  }
-  
   // 画线
   drawLine(x = 0, y = 0) {
     if (!this._ctx || this._executionArr.type) return
@@ -79,7 +90,7 @@ class DrawCanvas {
     this._ctx.stroke();
     this._executionArr.s = x
     this._executionArr.e = y
-    console.log('画线', this._executionArr);
+    console.log('画线');
   }
 
   // svg 路径转 canvas 路径
@@ -102,6 +113,14 @@ class DrawCanvas {
     return PATH
   }
 
+  // 获取path上的点
+  getPathPonit(path=''){
+    if(!path) return ''
+    const pathDom = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    const a = pathDom.getTotalLength()
+    return a
+  }
+
   // 销毁
   destory() {
     this._ctx = null
@@ -110,7 +129,6 @@ class DrawCanvas {
     this._pathArr = []
     this._style = null
     this._matrix = null
-    this._path = null
   }
 }
 

src/pages/views/draw/index.vue

@@ -12,7 +12,10 @@
     />
     <label>
       旋转角度º:
-      <input type="number">
+      <input
+        v-model="angle"
+        type="number"
+      >
     </label>
     <n-button
       type="tertiary"
@@ -35,7 +38,9 @@
   </div>
 </template>
 <script setup lang='ts'>
-import { h, onMounted, ref } from 'vue'
+import {
+  h, onMounted, onUnmounted, ref
+} from 'vue'
 import { DrawCanvas } from './assets/js/draw'
 
 const drawCanvas = new DrawCanvas()
@@ -201,6 +206,7 @@ const dicTypePath = {
   1: 'M69.4545878,34.6718448 C96.0319839,14.5464002 130.907219,-0.146079872 174.56443,0.522007913 C220.382312,1.22316053 255.607386,15.5063115 281.851378,35.1514114 C318.898628,62.8833568 338.052622,101.292047 343.850748,127.226896 C348.964999,150.102793 350.773132,170.630546 348.624737,186.798399 C346.628206,201.8234 341.223483,213.080679 331.813382,218.873688 C331.442887,219.101769 331.054704,219.344664 330.644655,219.601247 C319.902715,226.322867 294.07793,242.444674 177.407992,247.500112 C92.0383303,246.776789 19.7179823,226.018176 9.91797058,212.791135 C-0.632619328,198.551039 -1.84542038,163.783447 3.98419444,129.673937 C7.51590663,109.009626 28.7726098,65.4778309 69.4545878,34.6718448 Z',
   0: 'M175.000036,0.5 C222.664535,0.5 265.865535,21.1909654 297.358963,54.7296453 C328.90593,88.3253418 348.705559,134.812441 349.476653,186.303442 L349.490723,188.280824 L349.5,247.5 L0.5,247.5 L0.5,188.283766 C0.787224943,136.359137 20.4197058,89.3998566 51.9881066,55.4283849 C83.5364037,21.4785471 127.005458,0.5 175.000036,0.5 Z'
 }
+const angle = ref(0)
 
 function renderLabel(option: { icon: string | URL; label: string; }) {
   return h('div', {
@@ -241,6 +247,7 @@ onMounted(() => {
     }
   })
 })
+onUnmounted(() => drawCanvas.destory())
 </script>
 <style lang="scss">
 .draw {
@@ -275,4 +282,4 @@ onMounted(() => {
     outline: none;
   }
 }
-</style>./assets/js/draw.js
+</style>