消息事件

meta2d 支持订阅和发送消息,使用(内置):mitt

很多交互操作,都通过 mitt 发送消息

发送数据/自定义消息

// data 可以为任意数据
meta2d.emit('event', data);

监听消息(订阅)

const fn = (event, data) => {};
meta2d.on('event', fn);
// 不用时,又不销毁meta2d实例,记得取消订阅。

// 监听全部消息
meta2d.on('*', fn);

取消监听

const fn = (event, data) => {};
// 订阅
meta2d.on('event', fn);

// 取消订阅
meta2d.off('event', fn);

内置 API 消息

event(字符串)data描述
opened打开新文件
enterPen鼠标进入画笔
leavePen鼠标离开画笔
activePen[]选中一个/多个画笔
inactivePen[]取消选中
addPen[]添加一个/多个画笔
update编辑画笔
deletePen[]删除画笔
scalenumber缩放画布
translateObject: x, y平移画布
resizePensPen[]画笔大小改变
rotatePensPen[]画笔被旋转
translatePensPen[]移动画笔结束
translatingPensPen[]移动画笔中
clickPoint & Pen点击,鼠标左击 up
mousedownPoint & Pen鼠标 down
dblclickPoint & Pen双击
animateEnd单个画笔动画播放完成
mediaEndPen视频/音频(audio/video)播放结束
socketmessage监听网络消息
undo撤销后
redo恢复后
clickInput单击输入框
inputpen & text输入框键盘输入
valueUpdatepen修改属性值
contextmenue & bounding右键上下文菜单
connectLineObject:line, lineAnchor, pen, anchor,连线连接到锚点

事件及触发器

注意:事件或者触发器都必须在画布锁定的情况下才会执行。详见 setValue

  • 事件
  1. 选中节点,点击事件面板。

  1. 点击添加事件,选择事件类型和行为。

  1. 锁定画布,触发事件。

  • 触发器

演示视频【条件变化触发实时告警】:https://www.bilibili.com/video/BV1dT4y1U7V1?spm_id_from=333.999.0.0

  1. 点击"添加事件",点击"设置触发条件";

  1. 设置触发条件以及触发条件成立后的事件;

  • 如果需要触发条件成立后直接触发事件,事件类型可选择“值变化”。
  1. 触发条件成立,执行事件。

  • 触发条件中的JavaScript优先级高于上方的“属性名+条件+属性值”组合。
  • 触发条件中的JavaScript能够直接获取到pen参数,需返回。

单个条件

 属性名: text
 条件: >=
 属性值: 100
 等价于
 JavaScript输入 return pen.text>=100

多个条件

高优先级 JavaScript 输入 return pen.text >= 100 && pen.text <= 200;
  • 自定义消息(弹框示例)
  1. 为节点配置自定义消息事件

参考上方事件,事件行为选择“自定义消息”,配置消息名和参数。

  1. 监听自定义消息
// import { message } from 'ant-design-vue';

meta2d.on('userDefindMessage', (e) => {
    const pen = e.pen;
    const params = e.params;
    alert(pen.name + params);
    // message.info(pen.name + params);
});

演示视频【点击组件,显示弹框】https://www.bilibili.com/video/BV1634y1v7Yz?spm_id_from=333.999.0.0

  1. 触发事件