测试 turf.js 库

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

@@ -1,4 +1,4 @@
-import { lineSplit, points, polygon, pointsWithinPolygon, lineString ,nearestPointOnLine} from "@turf/turf";
+import { lineSplit, polygon, pointsWithinPolygon, lineString, nearestPointOnLine, point, getCoord } from "@turf/turf";
 
 class DrawCanvas {
 
@@ -24,14 +24,12 @@ 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._executionArr.outPath = outPath
+      this._executionArr.outPath = this.getPathPonit(dicTypePath) //获取所有外轮阔点
     }
     // 事件监听
     canvas.addEventListener('touchstart', this.touchStart.bind(this))
@@ -60,7 +58,6 @@ class DrawCanvas {
   }
 
   touchEnd() {
-    console.log('结束', this._fillStyle, this._executionArr,this._pathArr);
     const { arr: line, outPath, type } = this._executionArr
     if (line.length > 2) {
       // 画线才记录数据
@@ -68,16 +65,35 @@ class DrawCanvas {
         ...this._fillStyle,
         path: this._executionArr
       })
-      // 开始结束自动拟合
-      
+      // 查找最近的点
+      // const st = point(line[0])
+      // const et = point(line[line.length - 1])
+      // const sp = getCoord(nearestPointOnLine(lineString(outPath), st))
+      // const ep = getCoord(nearestPointOnLine(lineString(outPath), et))
+
+      // // 补齐 方向有问题
+      // this._executionArr.s = line[0][0]
+      // this._executionArr.e = line[0][1]
+      // this.drawLine(sp[0], sp[1])
+      // this._executionArr.s = line[line.length - 1][0]
+      // this._executionArr.e = line[line.length - 1][1]
+      // this.drawLine(ep[0], ep[1])
+
+      // line.unshift(sp)
+      // line.push(ep)
+      // console.log(22222222, sp, ep, 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);
-      }
+      // if (!type && outPath) {
+      //   const splitPath = lineSplit(lineString(line), lineString(outPath))
+      //   if (!splitPath.features.length) console.log('数据无法切分，请重画');
+      //   this._executionArr.splitPath = splitPath
+      //   console.log('画线结束,切割区域', this._pathArr);
+      // }
     }
+    console.log('结束', this._fillStyle, this._pathArr);
+
   }
 
   // 画线
@@ -113,12 +129,18 @@ class DrawCanvas {
     return PATH
   }
 
-  // 获取path上的点
-  getPathPonit(path=''){
-    if(!path) return ''
+  // 获取path上的真实点位
+  getPathPonit(path = '') {
+    if (!path) return []
     const pathDom = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    const a = pathDom.getTotalLength()
-    return a
+    pathDom.setAttributeNS(null, 'd', path)
+    const length = Math.floor(pathDom.getTotalLength())
+    const arr = []
+    for (let k = 0; k < length; k++) {
+      const point = pathDom.getPointAtLength(k)
+      arr.push([point.x, point.y])
+    }
+    return arr
   }
 
   // 销毁