【乐吾乐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);

相关推荐
MiyueFE14 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子18 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
小宁爱Python26 分钟前
FastAPI+Sqlite+HTML的登录注册与文件上传系统:完整实现指南
sqlite·html·fastapi
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss