添加基本形状

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

@@ -0,0 +1,62 @@
+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.beginPath();
+
+        ctx.arc(width/2.0, height / 2.0, (Math.min(width,height) - padding)  / 2.0,  Math.PI / 180.0 * data.value.start,  Math.PI / 180.0 * data.value.end)
+        if (data.value.isFill) {
+            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/Arc/index.ts

@@ -0,0 +1,73 @@
+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";
+import Slider from "../../formItems/Slider";
+
+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",
+    start: 0,
+    end: 360
+  },
+  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,
+      },
+      {
+        label: "起角",
+        dataIndex: "value.start",
+        component: Slider,
+        props: {
+            defaultValue: 0,
+            min: 0,
+            max: 360,
+            step: 1,
+          },
+    },
+    {
+        label: "终角",
+        dataIndex: "value.end",
+        component: Slider,
+        props: {
+            defaultValue: 180,
+            min: 0,
+            max: 360,
+            step: 1,
+          },
+    },
+]);

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

@@ -0,0 +1,62 @@
+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.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)
+        if (data.value.isFill) {
+            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/Ellipse/index.ts

@@ -0,0 +1,73 @@
+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";
+import Slider from "../../formItems/Slider";
+
+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",
+    start: 0,
+    end: 360
+  },
+  layout: {
+    size: [400, 200],
+  },
+});
+
+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,
+      },
+      {
+        label: "起角",
+        dataIndex: "value.start",
+        component: Slider,
+        props: {
+            defaultValue: 0,
+            min: 0,
+            max: 360,
+            step: 1,
+          },
+    },
+    {
+        label: "终角",
+        dataIndex: "value.end",
+        component: Slider,
+        props: {
+            defaultValue: 180,
+            min: 0,
+            max: 360,
+            step: 1,
+          },
+    },
+]);

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

@@ -0,0 +1,53 @@
+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.beginPath();
+        ctx.moveTo(0, height / 2.0);
+        ctx.lineTo(width, height / 2.0);
+        ctx.stroke();
+    }
+
+    
+    return () => (
+      <View compId={props.compId}>
+         <canvas ref={canvasRef} style={{width:"100%", height: "100%"}}> </canvas>
+      </View>
+    );
+  },
+});

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

@@ -0,0 +1,35 @@
+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,
+  },
+  layout: {
+    size: [400, 50],
+  },
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "线宽",
+    dataIndex: "value.lineWidth",
+    component: InputNumber,
+  },
+  {
+    label:"颜色",
+    dataIndex: "value.lineColor",
+    ...createColorOpts(),
+  },
+]);

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

@@ -6,4 +6,6 @@ export * as Text from "./Text";
 export * as Video from "./Video";
 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";

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"].map(
+        return ["Text", "Image", "Video", "Web3D", "Rectage", "Line", "Arc", "Ellipse"].map(
           (key) => compUICtrl.state.components.get(key) as any
         );
       },

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

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