【乐吾乐2D可视化组态编辑器】表单控件

表单控件

乐吾乐2D可视化组态编辑器demo：https://2d.le5le.com/

导入使用

import { formPens ,formPath2DPens} from '@meta2d/form-diagram';
meta2d.registerCanvasDraw(formPens());
meta2d.register(formPath2DPens());//版本>=1.0.9

time 时间显示

form-diagram1.0.9版本以后新增

|------------|---------|-----------------------------------------------------------------|
| 名称 | 类型 | 描述 |
| fillZero | boolean | 是否填充0，例如"1"填充为"01" |
| timeFormat | string | 显示格式，语法遵循模版字符串，可以拿到year、month、day、hours、minutes、seconds、week参数。 |

const time = {
  name: "time",
  x: 100,
  y: 100,
  width: 300,
  height: 40,
  text: '当前时间',
  lineWidth: 0,
  fillZero: true,
  timeFormat:
    '`${year}-${month}-${day} ${hours}:${minutes}:${seconds} 星期${week}`',
          
};

meta2d.addPens([time]);

radio 单选框

|----------------|------------|-------------------------------------------------------------------|
| 名称 | 类型 | 描述 |
| direction | string | 单选框的排列方向('vertical'|'horizontal') |
| optionInterval | number | 单选框选项间的间距（默认 20，仅针对垂直分布） |
| optionHeight | number | 单选框所占高度（默认 20，仅针对垂直分布） |
| checked | string | 选中项（与text对应） |
| options | object[] | 选项值，格式： { text:string,//显示文本 isForbidden:boolean,//是否禁用 ...样式属性 } |

const radio = {
  name: "radio",
  x: 100,
  y: 100,
  width: 150,
  height: 100,
  direction: "vertical",
  checked: '选项二',
  options: [
    { text: "选项一", background: "#ff0000" },
    { text: "选项二", background: "#00ff00" },
    { text: "选项三", background: "#0000ff", isForbidden: true },
  ],
};

meta2d.addPens([radio]);

checkbox 复选框

|-------------|---------|------|
| 名称 | 类型 | 描述 |
| isForbidden | boolean | 是否禁用 |
| checked | boolean | 是否选中 |
| value | string | 选项值 |

const checkbox = {
  name: "checkbox",
  x: 100,
  y: 100,
  width: 30,
  height: 30,
  checked: true,
  // isForbidden: true,
  value: '选项一',
};

meta2d.addPens([checkbox]);

switch 开关

|-----------------|---------|-----------|
| 名称 | 类型 | 描述 |
| checked | boolean | 是否打开 |
| offColor | string | 关闭时背景颜色 |
| onColor | string | 打开时背景颜色 |
| disable | boolean | 是否禁用 |
| disableOffColor | string | 关闭时禁用背景颜色 |
| disableOnColor | string | 打开时禁用背景颜色 |

const lSwitch = {
  name: "switch",
  x: 100,
  y: 100,
  height: 30,
  width: 60,
  checked: false,
  offColor: "#BFBFBF",
  onColor: "#1890ff",
  disableOffColor: "#E5E5E5",
  disableOnColor: "#A3D3FF",
  //disable: true,
};

meta2d.addPen(lSwitch);

slider 滑动输入条

【注意】当滑动条禁止移动时(locked=1)，才允许拖动滑块。

|-----------|--------|--------------|
| 名称 | 类型 | 描述 |
| barHeight | number | 滑动条高度 |
| textWidth | number | 文字区域宽度(靠右对齐) |
| min | number | 最小值 |
| max | number | 最大值 |
| unit | string | 单位 |
| value | number | 当前值 |

const slider = {
  name: "slider",
  x: 100,
  y: 100,
  width: 300,
  height: 30,
  value: 10,
  textWidth: 50,
  barHeight: 4,
  min: 0,
  max: 100,
  color: "#1890ff",
  background: "#D4D6D9",
  textColor: "#222222",
  unit: "%",
};

meta2d.addPen(slider);

button 按钮

按钮本质上和 rectangle 一样，但为了达到按钮的效果，我们需要配置一些样式属性。

const button = {
  name: "rectangle",
  x: 100,
  y: 100,
  width: 80,
  height: 30,
  borderRadius: 0.2,
  text: "按钮",
  background: "#1890ff",
  color: "#1890ff",
  textColor: "#ffffff",
  activeBackground: "#40a9ff", //选中
  activeColor: "#40a9ff",
  activeTextColor: "#ffffff",
  hoverBackground: "#40a9ff", //鼠标经过
  hoverColor: "#40a9ff",
  hoverTextColor: "#ffffff",
};

meta2d.addPen(button);

输入框

const input = {
  x: 100,
  y: 100,
  height: 50,
  width: 200,
  input: true,
  name: "rectangle",
  borderRadius: 0.05,
  ellipsis: true,
  text: "输入数据",
  textAlign: "left",
  color: "#D9D9D9FF",
  textColor: "#000000FF",
  hoverTextColor: "#000000FF",
  activeTextColor: "#000000FF",
  textLeft: 10,
};

meta2d.addPen(input);

选择器

const select = {
  x: 100,
  y: 100,
  height: 50,
  width: 200,
  name: "rectangle",
  borderRadius: 0.05,
  ellipsis: true,
  text: "选项1",
  textAlign: "left",
  color: "#D9D9D9FF",
  textColor: "#000000FF",
  hoverTextColor: "#000000FF",
  activeTextColor: "#000000FF",
  textLeft: 10,
  // dropdownList: ["选项1", "选项2", "选项3"],
  dropdownList: [
    { text: "选项1", background: "#ff0000" },
    { text: "选项2", background: "#00ff00" },
    { text: "选项3", background: "#0000ff" },
  ],
};

meta2d.addPen(select);