【乐吾乐2D可视化组态编辑器】生命周期

生命周期

乐吾乐2D可视化组态编辑器demo：https://2d.le5le.com/  
全局生命周期函数

2. meta2d.beforeAddPens = async (pens: Pen[]) => {
3.   console.log("addPens", pens);
5.   // showDialog 伪代码
6.   const res = await showDialog("是否添加此图元？");
7.   // 返回 true 允许 remove
8.   return res.ok;
9. };
11. // 删除组合节点时， beforeRemovePens 会多次触发
12. meta2d.beforeRemovePens = async (pens: Pen[]) => {
13.   console.log("removePens", pens);
14.   // showDialog 伪代码
15.   const res = await showDialog("是否删除所选图元？");
16.   // 返回 true 允许 remove
17.   return res.ok;
18. };
20. meta2d.beforeAddAnchor = async (pen: Pen, anchor: Point) => {
21.   // showDialog 伪代码
22.   return await showModal("添加锚点");
23. };
25. meta2d.beforeRemoveAnchor = async (pen: Pen, anchor: Point) => {
26.   // showDialog 伪代码
27.   return await showModal("删除锚点");
28. };
30. // 定义一个pen，矩形
31. const pen = {
32.   name: "rectangle",
33.   text: "矩形",
34.   x: 100,
35.   y: 100,
36.   width: 100,
37.   height: 100,
38.   tag: ["aaa"],
39. };
40. meta2d.addPen(pen);

复制代码

画笔生命周期函数

生命周期函数类型均为：(pen: Pen) => void , 除了 onBeforeValue, onChangeId

• onAdd 画笔添加到画布后
  
• onDestroy 画笔被删除后
  

其他相干函数：

• onBeforeValue 属性值发生改变前
  
• onValue 属性值发生修改
  
• onMove 被移动拖拽
  
• onResize 修改巨细
  
• onRotate 旋转
  
• onClick 单击
  
• onMouseDown 鼠标按下
  
• onMouseMove 鼠标移动
  
• onMouseUp 鼠标抬起
  
• onMouseEnter 鼠标经过
  
• onMouseLeave 鼠标离开
  
• onShowInput 开始输入
  
• onInput 完成输入
  
• onChangeId id 改变
  
• onKeyDown 键盘按下
  
• onScale 缩放
  
• onBinds 绑定变量处理
  
• onStartVideo 开始视频
  
• onPauseVideo 停息视频
  
• onStopVideo 停止视频
  
• onRenderPenRaw 下载png/svg前，pen绘制处理。
  
• onWheel 鼠标经过图元，滚轮缩放 (version>=1.0.25)
  

1. const onAddPen = (pen: Pen) => {
2.   console.log("onAddPen", pen);
3. };
5. // 定义一个pen，矩形
6. const pen = {
7.   name: "rectangle",
8.   text: "矩形",
9.   x: 100,
10.   y: 100,
11.   width: 100,
12.   height: 100,
13.   onAdd: onAddPen,
14. };
15. meta2d.addPen(pen);

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。