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

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",
    cp1: 0.5,  //控制点1
    p1: 0,  //顶点1的位置
    p2: 1,  //顶点1的位置
  },

  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.p1",
    component: Slider,
    props: {
        defaultValue: 0,
        min: 0,
        max: 1,
        step: 0.01,
    },
  },
  {
    label:"右顶点",
    dataIndex: "value.p2",
    component: Slider,
    props: {
        defaultValue: 1,
        min: 0,
        max: 1,
        step: 0.01,
    },
  },
  {
    label:"控制点",
    dataIndex: "value.cp1",
    component: Slider,
    props: {
        defaultValue: 0.5,
        min: -0.5,
        max: 1.5,
        step: 0.01,
    },
  },
]);