update

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

@@ -315,7 +315,11 @@ export const Component = defineComponent({
         canvas.height = Math.ceil(Math.max(1, height));
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.lineWidth = data.value.lineWidth;
-        
+
+        if (data.value.reverseFill) {
+            ctx.fillStyle = data.value.fillColor;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
         ctx.setLineDash([]);
         ctx.strokeStyle = data.value.lineColor;
     
@@ -332,6 +336,8 @@ export const Component = defineComponent({
         }
 
         const ps = parsePoints(data.value.points, width, height);
+        
+        ctx.save();
 
         ps.forEach((p, index)=>{
             const x = p.x
@@ -366,8 +372,16 @@ export const Component = defineComponent({
             let bColor = data.value.fillColor;
             if (!bColor) bColor = data.value.lineColor;
             ctx.fillStyle = bColor;
+            if (data.value.reverseFill) {
+                ctx.fillStyle = "red";
+                // 设置剪切区域
+                ctx.clip();
+                // 将当前路径指定的区域颜色扣除
+                ctx.globalCompositeOperation = "destination-out";
+            }
             ctx.fill();
         }
+        ctx.restore();
 
         //绘制辅助gizmo
         if (store.isEditMode  && store.currCompId == props.compId) {

src/modules/editor/components/CompUI/basicUI/Curve/index.ts

@@ -17,6 +17,7 @@ export const { createComp, useCompData } = createCompHooks({
     lineWidth: 1,
     isFill: false,
     fillColor: "black",
+    reverseFill: false,
     points: [],
     isClose: true,
     isCurve: false,
@@ -49,13 +50,14 @@ export const Form = createAttrsForm([
     isVisible: (value, data) => data?.value?.isFill == true,
   },
   {
-    label: "是否封闭",
-    dataIndex: "value.isClose",
+    label:"反向填充",
+    dataIndex: "value.reverseFill",
     component: "Switch",
+    isVisible: (value, data) => data?.value?.isFill == true,
   },
   {
-    label: "是否支持曲线",
-    dataIndex: "value.isCurve",
+    label: "是否封闭",
+    dataIndex: "value.isClose",
     component: "Switch",
-  }
+  },
 ]);

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

@@ -36,7 +36,9 @@ export const Component = defineComponent({
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.lineWidth = data.value.lineWidth;
         ctx.strokeStyle = data.value.lineColor;
-        // const padding = Math.max(10, data.value.lineWidth);
+        if (data.value.dashX != 0 && data.value.dashY != 0) {
+            ctx.setLineDash([data.value.dashX, data.value.dashY]);
+        }
         ctx.beginPath();
         ctx.moveTo(0, height / 2.0);
         ctx.lineTo(width, height / 2.0);

src/modules/editor/components/CompUI/basicUI/Line/index.ts

@@ -3,6 +3,7 @@ import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createCompHooks } from "../../defines/createCompHooks";
 import { InputNumber, Switch } from "ant-design-vue";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
+import Slider from "../../formItems/Slider";
 
 export { Component } from "./component";
 
@@ -15,9 +16,12 @@ export const { createComp, useCompData } = createCompHooks({
   value: {
     lineColor: "black",
     lineWidth: 1,
+    dashX: 0,
+    dashY: 0,
   },
+
   layout: {
-    size: [400, 50],
+    size: [400, 30],
   },
 });
 
@@ -32,4 +36,26 @@ export const Form = createAttrsForm([
     dataIndex: "value.lineColor",
     ...createColorOpts(),
   },
+  {
+    label: "实线长",
+    dataIndex: "value.dashX",
+    component: Slider,
+    props: {
+        defaultValue: 0,
+        min: 0,
+        max: 750,
+        step: 1,
+    },
+},
+{
+    label: "空白长",
+    dataIndex: "value.dashY",
+    component: Slider,
+    props: {
+        defaultValue: 0,
+        min: 0,
+        max: 750,
+        step: 1,
+    },
+},
 ]);

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

@@ -170,13 +170,20 @@ export const Component = defineComponent({
         canvas.height = Math.ceil(Math.max(1, height));
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.lineWidth = data.value.lineWidth;
-        
+        ctx.save();
     
+        if (data.value.reverseFill) {
+            ctx.fillStyle = data.value.fillColor;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+
+        if (data.value.res)
         ctx.strokeStyle = data.value.lineColor;
     
         const padding = 0.2;
 
         ctx.lineJoin = "round";
+
         ctx.beginPath();
        
 
@@ -203,21 +210,32 @@ export const Component = defineComponent({
             let bColor = data.value.fillColor;
             if (!bColor) bColor = data.value.lineColor;
             ctx.fillStyle = bColor;
+            if (data.value.reverseFill) {
+                ctx.fillStyle = "red";
+                // 设置剪切区域
+                ctx.clip();
+                // 将当前路径指定的区域颜色扣除
+                ctx.globalCompositeOperation = "destination-out";
+            }
             ctx.fill();
         }
 
-        points.forEach((p, index)=>{
-            const x = width * p[0];
-            const y = height * p[1];
+        ctx.restore();
 
-            if (store.isEditMode  && store.currCompId == props.compId) {
-                ctx.fillStyle = "red"
+        if (store.isEditMode  && store.currCompId == props.compId) {
+            points.forEach((p, index)=>{
+                const x = width * p[0];
+                const y = height * p[1];
 
-                ctx.beginPath();
-                ctx.arc(x, y, 5,  0, Math.PI*2);
-                ctx.fill();
-            }
-        })
+                
+                    ctx.fillStyle = "red"
+
+                    ctx.beginPath();
+                    ctx.arc(x, y, 5,  0, Math.PI*2);
+                    ctx.fill();
+                
+            })
+        }
     }
 
     return () => (

src/modules/editor/components/CompUI/basicUI/Polygon/index.ts

@@ -19,7 +19,7 @@ export const { createComp, useCompData } = createCompHooks({
     fillColor: "black",
     points: [],
     isClose: true,
-    isCurve: false,
+    reverseFill: false,
   },
   layout: {
     size: [750, 750],
@@ -37,6 +37,11 @@ export const Form = createAttrsForm([
     dataIndex: "value.lineColor",
     ...createColorOpts(),
   },
+  {
+    label: "是否封闭",
+    dataIndex: "value.isClose",
+    component: "Switch",
+  },
   {
     label: "是否填充",
     dataIndex: "value.isFill",
@@ -49,13 +54,10 @@ export const Form = createAttrsForm([
     isVisible: (value, data) => data?.value?.isFill == true,
   },
   {
-    label: "是否封闭",
-    dataIndex: "value.isClose",
+    label: "反向填充",
+    dataIndex: "value.reverseFill",
     component: "Switch",
+    isVisible: (value, data) => data?.value?.isFill == true,
   },
-  {
-    label: "是否支持曲线",
-    dataIndex: "value.isCurve",
-    component: "Switch",
-  }
+  
 ]);