愛在花開的季節 发表于 2024-7-23 00:19:30

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

生命周期

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


meta2d.beforeAddPens = async (pens: Pen[]) => {
console.log("addPens", pens);

// showDialog 伪代码
const res = await showDialog("是否添加此图元?");
// 返回 true 允许 remove
return res.ok;
};

// 删除组合节点时, beforeRemovePens 会多次触发
meta2d.beforeRemovePens = async (pens: Pen[]) => {
console.log("removePens", pens);
// showDialog 伪代码
const res = await showDialog("是否删除所选图元?");
// 返回 true 允许 remove
return res.ok;
};

meta2d.beforeAddAnchor = async (pen: Pen, anchor: Point) => {
// showDialog 伪代码
return await showModal("添加锚点");
};

meta2d.beforeRemoveAnchor = async (pen: Pen, anchor: Point) => {
// showDialog 伪代码
return await showModal("删除锚点");
};

// 定义一个pen,矩形
const pen = {
name: "rectangle",
text: "矩形",
x: 100,
y: 100,
width: 100,
height: 100,
tag: ["aaa"],
};
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)

const onAddPen = (pen: Pen) => {
console.log("onAddPen", pen);
};

// 定义一个pen,矩形
const pen = {
name: "rectangle",
text: "矩形",
x: 100,
y: 100,
width: 100,
height: 100,
onAdd: onAddPen,
};
meta2d.addPen(pen);


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 【乐吾乐2D可视化组态编辑器】生命周期