添加三角形

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

@@ -0,0 +1,63 @@
+import { defineComponent, onMounted , ref, effect} from "vue";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { useEditor } from "../../../..";
+import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
+import { View } from "../View";
+import { CompUI } from "../..";
+
+export const Component = defineComponent({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { helper, controls , store} = useEditor();
+    const data = useCompData(props.compId);
+
+    
+    onMounted(()=>{
+        // draw();
+        effect(draw);
+    })
+
+    
+
+    const canvasRef =  ref<HTMLCanvasElement>();
+    function draw() {
+        const canvas = canvasRef.value as HTMLCanvasElement;
+        if (!canvas) return;
+
+        const ctx = canvasRef.value?.getContext("2d") as CanvasRenderingContext2D;
+
+        const width = data.layout.size[0];
+        const height = data.layout.size[1];
+        canvas.width = Math.ceil(Math.max(1, width));
+        canvas.height = Math.ceil(Math.max(1, height));
+        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);
+        ctx.lineJoin = "round";
+        ctx.beginPath();
+        ctx.moveTo(width / 2.0, padding);
+        ctx.lineTo(width - padding, height - padding);
+        ctx.lineTo(padding, height - padding);
+        ctx.closePath();
+        ctx.stroke();
+    
+        if (data.value.isFill) {
+            let bColor = data.value.fillColor;
+            if (!bColor) bColor = data.value.lineColor;
+            ctx.fillStyle = bColor;
+            ctx.fill();
+        }
+    }
+
+    return () => (
+      <View compId={props.compId}>
+         <canvas ref={canvasRef} style={{width:"100%", height: "100%"}}> </canvas>
+      </View>
+    );
+  },
+});

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

@@ -0,0 +1,48 @@
+import { Dict_Imgs } from "@/dict";
+import { createAttrsForm } from "../../defines/createAttrsForm";
+import { createCompHooks } from "../../defines/createCompHooks";
+import { InputNumber, Switch } from "ant-design-vue";
+import { createColorOpts } from "../../defines/formOpts/createColorOpts";
+
+export { Component } from "./component";
+
+export const options = {
+  name: "三角形",
+  thumbnail: require("@/modules/editor/assets/icons/image.svg"),
+};
+
+export const { createComp, useCompData } = createCompHooks({
+  value: {
+    lineColor: "black",
+    lineWidth: 1,
+    isFill: false,
+    fillColor: "black"
+  },
+  layout: {
+    size: [400, 400],
+  },
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "线宽",
+    dataIndex: "value.lineWidth",
+    component: InputNumber,
+  },
+  {
+    label:"颜色",
+    dataIndex: "value.lineColor",
+    ...createColorOpts(),
+  },
+  {
+    label: "是否填充",
+    dataIndex: "value.isFill",
+    component: "Switch",
+  },
+  {
+    label:"填充颜色",
+    dataIndex: "value.fillColor",
+    ...createColorOpts(),
+    isVisible: (value, data) => data?.value?.isFill == true,
+  },
+]);

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

@@ -8,4 +8,5 @@ export * as Web3D from "./Web3D";
 export * as Rectage from "./Rectage";
 export * as Line from "./Line";
 export * as Arc from "./Arc";
-export * as Ellipse from "./Ellipse";
+export * as Ellipse from "./Ellipse";
+export * as Triangle from "./Triangle";

src/modules/editor/components/Viewport/Slider/SliderLeft/BaseComp.tsx

@@ -13,7 +13,7 @@ export default defineComponent({
 
     const state = useReactive(() => ({
       basicComps() {
-        return ["Text", "Image", "Video", "Web3D", "Rectage", "Line", "Arc", "Ellipse"].map(
+        return ["Text", "Image", "Video", "Web3D", "Rectage", "Line", "Arc", "Ellipse", "Triangle"].map(
           (key) => compUICtrl.state.components.get(key) as any
         );
       },

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

@@ -48,7 +48,9 @@ export const editActions = EditorModule.action({
       compKey != "Image" &&
       compKey != "Rectage" &&
       compKey != "Line" &&
-      compKey != "Arc"
+      compKey != "Arc" && 
+      compKey != "Triangle" &&
+      compKey != "Ellipse"
 
     let yOffset = 0;
     if (