添加编辑功能

src/modules/editor/components/CompUI/basicUI/Polygon/component.tsx

@@ -5,6 +5,48 @@ import { useEditor } from "../../../..";
 import { View } from "../View";
 import { CompUI } from "../..";
 import { values } from "lodash";
+import { Angle } from "@/modules/editor/controllers/SelectCtrl/objects/mathUtils";
+
+function findNearestPoint(points: number[][], w:number, h:number, sx:number, sy:number) {
+   const n = points.length;
+   let minv = 100000;
+    let minIndex = -1;
+    const positions = []
+
+   for(let i=0; i<n; i++) {
+      const p = points[i];
+      const x = w *p[0];
+      const y = h *p[1];
+      positions.push([x, y]);
+
+      const ln = (sx-x)*(sx-x) + (sy-y)*(sy-y);
+      if ( ln < minv ) {
+        minIndex = i;
+        minv = ln;
+         if(!(sx < (x -10) || sx > (x + 10) || sy < (y -10) || sy > (y+10) ) ) {
+            return {clicked: true, index: i};
+         }
+      }
+   }   
+
+   let preIndex = minIndex -1;
+   if (preIndex < 0 ) preIndex = n-1;
+   let afterIndex = minIndex + 1;
+   if ( afterIndex >= n) afterIndex = 0;
+
+   const currV = {x:sx-positions[minIndex][0], y:sy-positions[minIndex][1]};
+   const preV = {x:positions[preIndex][0]-positions[minIndex][0], y:positions[preIndex][1]-positions[minIndex][1]}
+   const afterV = {x:positions[afterIndex][0]-positions[minIndex][0], y:positions[afterIndex][1]-positions[minIndex][1]}
+
+  const a1 =  Angle(currV, preV)
+  const a2 =  Angle(currV, afterV);
+
+  if (a1 < a2) {
+    return {index: preIndex};
+  }
+
+  return {index: minIndex};
+}
 
 export const Component = defineComponent({
   props: {
@@ -14,24 +56,33 @@ export const Component = defineComponent({
     const { helper, controls , store} = useEditor();
     const data = useCompData(props.compId);
     const canvasRef =  ref<HTMLCanvasElement>();
-
-  
-
     onMounted(()=>{
         
         // draw();
         let isDragingIndex = -1;
-
         canvasRef.value?.addEventListener("dblclick", function(e:MouseEvent){
             
             const x = helper.pxToDesignSize(e.offsetX )
             const y = helper.pxToDesignSize(e.offsetY)
-            console.log("dbclick=>xxxxx", x, y);
-
-            //判断直线相交求解点到直线的距离
             
+            const points = data.value.points as number[][];
+            const w = data.layout.size[0];
+            const h = data.layout.size[1];
+            //判断直线相交求解点到直线的距离
+            const ret = findNearestPoint(data.value.points, w , h, x, y);
             //判断是否
+            console.log("dbclick=>xxxxx", ret);
+            if (ret.clicked) {//点击删除
+                points.splice(ret.index, 1);
+                if (points.length < 4) {
+                    return;
+                }
 
+            } else {
+                points.splice(ret.index+1, 0, [x / w, y / h]);
+            }
+
+            draw();
         })
 
         canvasRef.value?.addEventListener("mousedown", function(e:MouseEvent){
@@ -139,10 +190,6 @@ export const Component = defineComponent({
             const x = width * p[0];
             const y = height * p[1];
             index == 0 ?  ctx.moveTo(x, y) :  ctx.lineTo(x, y);
-            if (store.isEditMode) {
-                ctx.fillStyle = "red"
-                ctx.fillRect(x-10, y-10, 20, 20);
-            }
         })
 
         if (data.value.isClose) {
@@ -158,6 +205,19 @@ export const Component = defineComponent({
             ctx.fillStyle = bColor;
             ctx.fill();
         }
+
+        points.forEach((p, index)=>{
+            const x = width * p[0];
+            const y = height * p[1];
+
+            if (store.isEditMode  && store.currCompId == props.compId) {
+                ctx.fillStyle = "red"
+
+                ctx.beginPath();
+                ctx.arc(x, y, 5,  0, Math.PI*2);
+                ctx.fill();
+            }
+        })
     }
 
     return () => (