upDATE

src/modules/editor/assets/icons/arc.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="22.8" height="19.219" viewBox="0 0 22.8 19.219"><defs><style>.a{fill:none;stroke:#d3d3d3;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px;}</style></defs><g transform="translate(-716.599 -81.182)"><path class="a" d="M27.6,30.078c0-6-4.835-12.078-10.8-12.078S6,24.074,6,30.078" transform="translate(711.199 69.724)"/><path class="a" d="M16.33,14H10" transform="translate(708.5 70.967)"/><path class="a" d="M34.551,14H28" transform="translate(702.949 70.967)"/><circle class="a" cx="2.932" cy="2.932" r="2.932" transform="translate(725.066 81.782)"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a,.b{fill:none;}.b{stroke:#d3d3d3;stroke-linecap:round;stroke-width:1.2px;}</style></defs><g transform="translate(-646 -75)"><g transform="translate(303)"><rect class="a" width="32" height="32" transform="translate(343 75)"/></g><path class="b" d="M16488.3,5204s-17.988.152-18.078,18.183" transform="translate(-15817.265 -5122.092)"/></g></svg>

src/modules/editor/assets/icons/curve.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="19.287" height="19.391" viewBox="0 0 19.287 19.391"><defs><style>.a{fill:none;stroke:#d3d3d3;stroke-linecap:round;stroke-width:1.2px;}</style></defs><path class="a" d="M16488.3,5204s-17.988.152-18.078,18.183" transform="translate(-16469.621 -5203.396)"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a,.b{fill:none;}.b{stroke:#d3d3d3;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px;}</style></defs><g transform="translate(-692 -75)"><g transform="translate(349)"><rect class="a" width="32" height="32" transform="translate(343 75)"/></g><g transform="translate(-20 0.208)"><path class="b" d="M27.6,30.078c0-6-4.835-12.078-10.8-12.078S6,24.074,6,30.078" transform="translate(711.199 69.724)"/><path class="b" d="M16.33,14H10" transform="translate(708.5 70.967)"/><path class="b" d="M34.551,14H28" transform="translate(702.949 70.967)"/><circle class="b" cx="2.932" cy="2.932" r="2.932" transform="translate(725.066 81.782)"/></g></g></svg>

src/modules/editor/assets/icons/ellicipe.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16.2" height="21.2" viewBox="0 0 16.2 21.2"><defs><style>.a{fill:none;stroke:#d3d3d3;stroke-width:1.2px;}</style></defs><ellipse class="a" cx="7.5" cy="10" rx="7.5" ry="10" transform="translate(0.6 0.6)"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a,.b{fill:none;}.b{stroke:#d3d3d3;stroke-width:1.2px;}</style></defs><g transform="translate(-830 -75)"><rect class="a" width="32" height="32" transform="translate(830 75)"/><ellipse class="b" cx="7.5" cy="10" rx="7.5" ry="10" transform="translate(839 81)"/></g></svg>

src/modules/editor/assets/icons/line.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="19.697" height="19.697" viewBox="0 0 19.697 19.697"><defs><style>.a{fill:none;stroke:#d3d3d3;stroke-linecap:round;stroke-width:1.2px;}</style></defs><line class="a" x1="18" y2="18" transform="translate(0.849 0.849)"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a,.b{fill:none;}.b{stroke:#d3d3d3;stroke-linecap:round;stroke-width:1.2px;}</style></defs><g transform="translate(-600 -75)"><rect class="a" width="32" height="32" rx="2" transform="translate(600 75)"/><line class="b" x1="18" y2="18" transform="translate(607 82)"/></g></svg>

src/modules/editor/assets/icons/polygon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="19.388" height="21.147" viewBox="0 0 19.388 21.147"><defs><style>.a{fill:none;stroke:#d3d3d3;stroke-width:1.2px;}</style></defs><path class="a" d="M14.6,24.078,6.52,19.587A1.01,1.01,0,0,1,6,18.7V9.789a1.01,1.01,0,0,1,.52-.883L14.6,4.415a1.01,1.01,0,0,1,.981,0l8.083,4.491a1.01,1.01,0,0,1,.52.883V18.7a1.01,1.01,0,0,1-.52.883l-8.083,4.491A1.01,1.01,0,0,1,14.6,24.078Z" transform="translate(-5.4 -3.673)"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a,.b{fill:none;}.b{stroke:#d3d3d3;stroke-width:1.2px;}</style></defs><g transform="translate(-876 -75)"><rect class="a" width="32" height="32" transform="translate(876 75)"/><path class="b" d="M14.6,24.078,6.52,19.587A1.01,1.01,0,0,1,6,18.7V9.789a1.01,1.01,0,0,1,.52-.883L14.6,4.415a1.01,1.01,0,0,1,.981,0l8.083,4.491a1.01,1.01,0,0,1,.52.883V18.7a1.01,1.01,0,0,1-.52.883l-8.083,4.491A1.01,1.01,0,0,1,14.6,24.078Z" transform="translate(876.906 76.753)"/></g></svg>

src/modules/editor/assets/icons/rect.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="19.2" height="19.2" viewBox="0 0 19.2 19.2"><defs><style>.a{fill:rgba(0,0,0,0);stroke:#d3d3d3;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px;}</style></defs><g transform="translate(0.272 0.272)"><rect class="a" width="18" height="18" rx="1" transform="translate(0.328 0.328)"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a{fill:none;}.b{fill:rgba(0,0,0,0);stroke:#d3d3d3;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px;}</style></defs><g transform="translate(-784 -75)"><rect class="a" width="32" height="32" transform="translate(784 75)"/><g transform="translate(790.672 81.672)"><rect class="b" width="18" height="18" rx="1" transform="translate(0.328 0.328)"/></g></g></svg>

src/modules/editor/assets/icons/triangle.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="21.899" height="19.322" viewBox="0 0 21.899 19.322"><defs><style>.a{fill:none;stroke:#d3d3d3;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px;fill-rule:evenodd;}</style></defs><path class="a" d="M12.929,6.494a1.007,1.007,0,0,1,1.742,0L24,22.6a1.007,1.007,0,0,1-.871,1.511H4.474A1.007,1.007,0,0,1,3.6,22.6Z" transform="translate(-2.851 -5.392)"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a,.b{fill:none;}.b{stroke:#d3d3d3;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px;fill-rule:evenodd;}</style></defs><g transform="translate(-738 -75)"><rect class="a" width="32" height="32" transform="translate(738 75)"/><path class="b" d="M12.929,6.494a1.007,1.007,0,0,1,1.742,0L24,22.6a1.007,1.007,0,0,1-.871,1.511H4.474A1.007,1.007,0,0,1,3.6,22.6Z" transform="translate(740.199 75.947)"/></g></svg>

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

@@ -36,6 +36,12 @@ export const Component = defineComponent({
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.lineWidth = data.value.lineWidth;
         ctx.strokeStyle = data.value.lineColor;
+
+        if (data.value.reverseFill) {
+          ctx.fillStyle = data.value.fillColor;
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+
         const padding = Math.max(10, data.value.lineWidth);
         ctx.beginPath();
 
@@ -48,6 +54,11 @@ export const Component = defineComponent({
             let bColor = data.value.fillColor;
             if (!bColor) bColor = data.value.lineColor;
             ctx.fillStyle = bColor;
+            if (data.value.reverseFill) {
+              ctx.clip();
+              // 将当前路径指定的区域颜色扣除
+              ctx.globalCompositeOperation = "destination-out";
+            }
             ctx.fill();
         }
     }

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

@@ -18,6 +18,7 @@ export const { createComp, useCompData } = createCompHooks({
     lineWidth: 1,
     isFill: false,
     fillColor: "black",
+    reverseFill: false,
     start: 0,
     end: 360
   },
@@ -48,6 +49,12 @@ export const Form = createAttrsForm([
         ...createColorOpts(),
         isVisible: (value, data) => data?.value?.isFill == true,
       },
+      {
+        label:"反向填充",
+        dataIndex: "value.reverseFill",
+        component: "Switch",
+        isVisible: (value, data) => data?.value?.isFill == true,
+      },
       {
         label: "起角",
         dataIndex: "value.start",

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

@@ -37,6 +37,12 @@ export const Component = defineComponent({
         ctx.lineWidth = data.value.lineWidth;
         ctx.strokeStyle = data.value.lineColor;
         const padding = Math.max(10, data.value.lineWidth);
+        if (data.value.reverseFill) {
+          ctx.fillStyle = data.value.fillColor;
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+
+        
         ctx.beginPath();
 
         ctx.ellipse(width/2.0, height / 2.0, (width-padding)/2.0, (height-padding) / 2.0,  0,   Math.PI / 180.0 * data.value.start,  Math.PI / 180.0 * data.value.end)
@@ -48,6 +54,11 @@ export const Component = defineComponent({
             let bColor = data.value.fillColor;
             if (!bColor) bColor = data.value.lineColor;
             ctx.fillStyle = bColor;
+            if (data.value.reverseFill) {
+              ctx.clip();
+              // 将当前路径指定的区域颜色扣除
+              ctx.globalCompositeOperation = "destination-out";
+            }
             ctx.fill();
         }
     }

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

@@ -18,6 +18,7 @@ export const { createComp, useCompData } = createCompHooks({
     lineWidth: 1,
     isFill: false,
     fillColor: "black",
+    reverseFill: false,
     start: 0,
     end: 360
   },
@@ -48,6 +49,12 @@ export const Form = createAttrsForm([
         ...createColorOpts(),
         isVisible: (value, data) => data?.value?.isFill == true,
       },
+      {
+        label:"反向填充",
+        dataIndex: "value.reverseFill",
+        component: "Switch",
+        isVisible: (value, data) => data?.value?.isFill == true,
+      },
       {
         label: "起角",
         dataIndex: "value.start",

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

@@ -38,7 +38,11 @@ export const Component = defineComponent({
         
         
         ctx.strokeStyle = data.value.lineColor;
-     
+        if (data.value.reverseFill) {
+          ctx.fillStyle = data.value.fillColor;
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+
     
         const padding = Math.max(10, data.value.lineWidth);
         ctx.lineJoin = "round";
@@ -55,6 +59,11 @@ export const Component = defineComponent({
             let bColor = data.value.fillColor;
             if (!bColor) bColor = data.value.lineColor;
             ctx.fillStyle = bColor;
+            if (data.value.reverseFill) {
+              ctx.clip();
+              // 将当前路径指定的区域颜色扣除
+              ctx.globalCompositeOperation = "destination-out";
+            }
             ctx.fill();
         }
     }

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

@@ -16,7 +16,8 @@ export const { createComp, useCompData } = createCompHooks({
     lineColor: "black",
     lineWidth: 1,
     isFill: false,
-    fillColor: "black"
+    fillColor: "black",
+    reverseFill: false,
   },
   layout: {
     size: [400, 400],
@@ -45,4 +46,10 @@ export const Form = createAttrsForm([
     ...createColorOpts(),
     isVisible: (value, data) => data?.value?.isFill == true,
   },
+  // {
+  //   label:"反向填充",
+  //   dataIndex: "value.reverseFill",
+  //   component: "Switch",
+  //   isVisible: (value, data) => data?.value?.isFill == true,
+  // },
 ]);

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

@@ -39,6 +39,11 @@ export const Component = defineComponent({
         ctx.strokeStyle = data.value.lineColor;
         const padding = Math.max(10, data.value.lineWidth);
         ctx.lineJoin = "round";
+        if (data.value.reverseFill) {
+          ctx.fillStyle = data.value.fillColor;
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+        
         ctx.beginPath();
         ctx.moveTo(width / 2.0, padding);
         ctx.lineTo(width - padding, height - padding);
@@ -50,6 +55,11 @@ export const Component = defineComponent({
             let bColor = data.value.fillColor;
             if (!bColor) bColor = data.value.lineColor;
             ctx.fillStyle = bColor;
+            if (data.value.reverseFill) {
+              ctx.clip();
+              // 将当前路径指定的区域颜色扣除
+              ctx.globalCompositeOperation = "destination-out";
+            }
             ctx.fill();
         }
     }

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

@@ -16,7 +16,8 @@ export const { createComp, useCompData } = createCompHooks({
     lineColor: "black",
     lineWidth: 1,
     isFill: false,
-    fillColor: "black"
+    fillColor: "black",
+    reverseFill: false,
   },
   layout: {
     size: [400, 400],
@@ -45,4 +46,10 @@ export const Form = createAttrsForm([
     ...createColorOpts(),
     isVisible: (value, data) => data?.value?.isFill == true,
   },
+  {
+    label:"反向填充",
+    dataIndex: "value.reverseFill",
+    component: "Switch",
+    isVisible: (value, data) => data?.value?.isFill == true,
+  },
 ]);

src/modules/editor/module/actions/edit.ts

@@ -272,12 +272,14 @@ export const editActions = EditorModule.action({
       });
       const thumbnail = URL.createObjectURL(blob);
       const title = await queenApi.showInput({
-        title: "保存到我的组件",
+        title: "保存到我的",
         defaultValue: this.controls.compUICtrl.state.components.get(
           comp.compKey
         )?.name,
       });
 
+      
+
       const data = {
         title,
         thumbnail,