【国产开源可视化引擎Meta2d.js】图元

乐吾乐科技

已于 2024-07-04 10:34:19 修改

阅读量576

点赞数 8

分类专栏： 2D可视化组态编辑器文章标签： javascript 开发语言数据可视化编辑器流程图前端

于 2024-07-04 10:27:02 首次发布

本文链接：https://blog.csdn.net/le5le_iot/article/details/140172622

版权

2D可视化组态编辑器专栏收录该内容

69 篇文章 3 订阅

订阅专栏

图元

又称画笔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,           // 发送消息
}