添加顶点属性

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

@@ -3,6 +3,8 @@ import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createCompHooks } from "../../defines/createCompHooks";
 import { InputNumber, Switch } from "ant-design-vue";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
+import toolbarUI from "./toolbarUI";
+import toolbarRight from "./toolbarRight";
 
 export { Component } from "./component";
 
@@ -59,5 +61,8 @@ export const Form = createAttrsForm([
     component: "Switch",
     isVisible: (value, data) => data?.value?.isFill == true,
   },
-  
+  {
+    dataIndex: "value.points",
+    component: toolbarRight,
+  },
 ]);

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

@@ -0,0 +1,68 @@
+import { useEditor } from "@/modules/editor";
+import { css } from "@linaria/core";
+import { Button, Divider, InputNumber, Select } from "ant-design-vue";
+import { defineComponent, reactive, effect, watch } from "vue";
+import { any, array, string } from "vue-types";
+
+import ToolbarsUI from "./toolbarUI";
+import Slider from "../../formItems/Slider";
+import { ToolbarItem } from "@/modules/editor/objects/Toolbars/default";
+import _ from "lodash";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+
+
+export default defineComponent({
+    props: {
+        value: array<any>()
+    },
+
+    emits: ["change"],
+    setup(props, { emit }) {
+        return () => {
+            const points = props.value || [];
+            const options = points.map((item: any, index: number) => { return { label: "顶点" + (index + 1), value: index } }) || [];
+            const state = editState;
+
+            return (
+                <div class="flex w-full flex-col">
+                    <Divider style={{margin: "10px 0"}}></Divider>
+
+                    <div class="flex items-center">
+                        <span class="w-70px">
+                            锚点选择
+                        </span>
+                        <Select value={editState.index} options={options} onChange={v => {
+                            editState.index = v as number;
+                        }}>
+                        </Select>
+                    </div>
+                    {
+                        points.length > 0 && <div class="flex items-center mt-10px">
+                            <span class="w-70px">宽度偏移</span> 
+                            <Slider  value={points[state.index][0]} min={0} max={1} step={0.01} onChange={(v) => {
+                                const ps = points.slice(0);
+                                ps[state.index][0] = v;
+                                emit("change", ps);
+                            }} />
+                        </div>
+                    }
+                    {
+                        points.length > 0 && <div class="flex items-center">
+                            <span class="w-70px" >高度偏移</span> <Slider value={points[state.index][1]} min={0} max={1} step={0.01} onChange={(v) => {
+                                const ps = points.slice(0);
+                                ps[state.index][1] = v;
+                                emit("change", ps);
+                            }} />
+                        </div>
+                    }
+                </div>
+            )
+        }
+    },
+})
+
+const editState = reactive({
+    index: 0
+})
+
+export { editState };