表单控件
乐吾乐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);