图元
又称画笔Pen。图形表达的基本元素，组成图像的基本单元。
构成
每一个图元由ID、名字、类型、属性（数据）组成。
ID
名为“id”的特殊属性，图元实例（画布上的图元对象）的唯一标识。拖拽到画布或创建一个图元对象时，自动生成。可以修改，但需要保证唯一性。自定义图形库时不能写死。
名字
名为“name”的特殊属性，用于区分不同的图形。例如正方形、圆、连线、开关、报警灯等。
类型
名为“type”的特殊属性，用于区分节点node和连线line。
- 节点 - 没有轨迹的普通图形，具有逐帧动画。
- 连线 - 包含起点终点的轨迹线条，只有轨迹动画，没有逐帧动画。
属性（数据）
属性即数据。图元属性数据分通用属性和自定义数据：
- 通用属性 - Meta2d.js内核支持的通用规则属性。
常用通用属性有： id，name，type，rect，text，anchors、color、background等。
- 自定义数据 - 图元自身独有数据，用于显示或业务逻辑。可以任意添加自定义数据。
添加
符合格式的 json 数据即图元。例如：
// 矩形
const pen = { name: "rectangle", text: "矩形", x: 100, y: 100, width: 100, height: 100, };
// 方式1：添加到画布，并选中，会触发生命周期函数beforeAddPen
meta2d.addPen(pen);
// 方式2：仅添加画笔，不选中，不触发生命周期函数，不重绘（不立刻显示），可用于批量添加后，一次重绘
meta2d.canvas.makePen(pen);
// 选中高亮
meta2d.active([pen]);
// 重绘显示
meta2d.render();上面代码，可直接在 2d.le5le.com 官网在线编辑器或 meta2d 实例页面的控制台执行
查找
const pen = {
id: "唯一id，缺省自动生成",
name: "rectangle",
text: "矩形",
x: 100,
y: 100,
width: 100,
height: 100,
tags: ["tag-rectangle"],
};
meta2d.addPen(pen);
// 方法1：通过id查找
const pen1 = meta2d.findOne(pen.id);
// 方法2：通过tag查找。find函数返回的是数组
const pens = meta2d.find("tag-rectangle");更新
const pen = {
id: "唯一id，缺省自动生成",
name: "rectangle",
text: "矩形",
x: 100,
y: 100,
width: 100,
height: 100,
tags: ["tag-rectangle"],
};
meta2d.addPen(pen);
// 方法1：通过id查找修改
meta2d.setValue({
id: pen.id,
color: "red",
});
// 方法2：通过tag（批量）修改，满足条件的都将修改
meta2d.setValue({
tag: 'tag-rectangle',
color: "red",
});选中
const pen = {
name: "rectangle",
text: "矩形",
x: 100,
y: 100,
width: 100,
height: 100,
};
meta2d.addPen(pen);
// 选中
meta2d.active([pen]);
// 取消选中
meta2d.inactive();
// 查看是否选中
console.log(pen.calculative.active);
// 查看选中图元
console.log(meta2d.store.active)区域
每个图元需要有一个宽高不为0的区域，即x,y,width,height
const pen = {
name: "rectangle",
text: "矩形",
x: 100,
y: 100,
width: 100,
height: 100,
};
meta2d.addPen(pen);
// 获取区域坐标
meta2d.getPenRect(pen)
// 设置图元坐标
meta2d.setPenRect(pen,{x,y,width,height})【注意】如果pen为根元素，坐标为>1的像素；如果pen为子元素，坐标为相对父元素的纯小数表示的百分比。
交互事件
仅当画布锁定后(meta2d.store.data.locked = 1 or 2)，触发事件。否则，干扰编辑。交互事件主要有：
- 鼠标进入 enter
- 鼠标离开 leave
- 选中 active
- 取消选中 inactive
- 单击 click
- 双击 dblclick
- 鼠标按下 mousedown
- 鼠标抬起 mouseup
- 值变化 valueUpdate
const pen = {
name: "rectangle",
text: "矩形",
x: 100,
y: 100,
width: 100,
height: 100,
events: [
{
name: "click",
action: EventAction.Link, // 执行动作
where: { key: "text", comparison: "==", value: "矩形" }, // 触发条件
value: "2d.le5le.com",
},
],
};
meta2d.addPen(pen);
//
enum EventAction {
Link, // 打开链接
SetProps, // 设置属性
StartAnimate, // 执行动画
PauseAnimate, // 暂停动画
StopAnimate, // 停止动画
Function, // 执行JS代码
WindowFn, // 执行全局函数
Emit, // 发送消息
}国产开源
乐吾乐潜心研发，自主可控，持续迭代优化
Github：GitHub - le5le-com/meta2d.js: The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实时数据响应和交互的2d引擎，可用于Web组态，物联网，数字孪生等场景。
Gitee: meta2d.js: The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实时数据响应和交互的2d引擎，可用于Web组态，物联网，数字孪生等场景。
欢迎Star、Fork、博文支持
