【乐吾乐2D可视化组态编辑器】事件

事件

乐吾乐2D可视化组态编辑器demo:https://2d.le5le.com/  

仅当画布锁定后(meta2d.store.data.locked = 1 or 2),触发事件。否则,干扰编辑。

定义

图元下的events属性为事件列表。

const pen = {name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,events: [{name: "click",action: EventAction.Link, // 执行动作where: { type:'comparison',  key: "text", comparison: "==", value: "矩形" }, // 触发条件value: "2d.le5le.com",},],
};

Copy

events对象说明

  • name - 事件类型
  • action - 事件行为
  • value - 事件附属数据
  • params - 事件参数
  • where - 触发条件

事件类型

事件类型name值如下:

  • 鼠标进入 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: { type:'comparison',  key: "text", comparison: "==", value: "矩形" }, // 触发条件value: "2d.le5le.com",},],
};
meta2d.addPen(pen);

事件行为

事件行为action为一个枚举值:

enum EventAction {Link,           // 打开链接  SetProps,       // 更改属性StartAnimate,   // 执行动画PauseAnimate,   // 暂停动画StopAnimate,    // 停止动画JS,             // 执行JS代码GlobalFn,       // 执行全局函数Emit,           // 发送消息StartVideo,     // 播放视频PauseVideo,     // 暂停视频StopVideo,      // 停止视频SendPropData,   // 发送图元数据SendVarData,    // 发送绑定变量
}

打开链接

const pen = {name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,events: [{name: "click",action: EventAction.Link,value: "2d.le5le.com",},],
};

更改属性

const pen = {name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,events: [{name: "click",action: EventAction.SetProps,params:'id/tag',//目标图元,你要更改属性的图元的id/tagvalue: {color:'red',text:'le5le'//...需要更改的其他属性},},],
};

动画执行/暂停/停止

const pen = {name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,events: [{name: "click",action: EventAction.StartAnimate,//PauseAnimate StopAnimatevalue:'id/tag'//目标图元,要执行/暂停/停止动画的图元的id/tag},],
};

执行JS代码

const pen = {name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,events: [{name: "click",action: EventAction.JS,params: "我是参数",//传递到代码块的参数value:`console.log('arguments',arguments);console.log('当前点击的图元', pen);console.log('参数',params);console.log('上下文',context);`//代码块},],
};//请求接口示例
//value:"fetch('/api/device/data?mock=1').then((e) => {e.text().then(data=>{console.log(data)});})"

执行全局函数

globalThis.le5leFn= (pen,params) =>{console.log('当前图元:',pen,'参数:',params);
};const pen = {name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,events: [{name: "click",action: EventAction.GlobalFn,params: "我是参数",//传到代码块的参数value:"le5leFn" //全局函数名},],
};

发送消息

//meta2d监听该消息
meta2d.on('le5le-emit',(e)=>{console.log(e)});const pen = {name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,events: [{name: "click",action: EventAction.Emit,params: "我是参数",//传到代码块的参数value:"le5le-emit" //消息名},],
};

视频播放/暂停/停止

const pen = {name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,events: [{name: "click",action: EventAction.StartVideo,//PauseVideo StopVideovalue:'id/tag'//目标图元,要播放/暂停/停止视频图元的id/tag},],
};

发送图元数据

const pen = {name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,events: [{name: "click",action: EventAction.SendPropData,params:'id/tag',//目标图元的id/tag,你要发送哪个图元的数据value: {color:'red', //有值发送该值text:'' //为空会从拿到目标图元的属性值//发送的数据},extend: "topic1,topic2"//建立mqtt通信时填写该参数,表示你发送数据到哪几个topic},],
};

发送绑定变量

const pen = {name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,events: [{name: "click",action: EventAction.SendVarData,params:'id/tag',//目标图元的id/tag,你要发送哪个图元的数据value: {bindId:'value' //绑定的变量及值,值为空则从目标图元中拿到绑定变量对应属性的值},extend: "topic1,topic2"//建立mqtt通信时填写该参数,表示你发送数据到哪几个topic},],
};

条件触发

条件触发是指满足指定条件才触发事件。

const pen = {name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,events: [{name: "click",// 执行动作action: EventAction.Link, // 运算符触发条件。text属性值 == “矩形” 触发where: { type:'comparison', key: "text", comparison: "==", value: "矩形" }, value: "2d.le5le.com",},{name: "click",action: EventAction.Link, // 通过自定义条件函数返回值触发条件where: { type: "fn", fn:()=>{return bool;} },  value: "2d.le5le.com",},{name: "click",action: EventAction.Link, // 通过js代码返回值触发条件。where: { type: "温度过高", fnJs:"伪代码;return bool;" },  value: "2d.le5le.com",},{name: "click",action: EventAction.Link, // 通过js代码返回值触发条件。where: { type: "电流过高", fnJs:"伪代码;return bool;" },  value: "2d.le5le.com",},],
};
meta2d.addPen(pen);

数据结构

where数据属性结构如下:

  • type - 任意值,推荐使用条件的功能名称方便阅读。为空时,表示没有触发条件。
  • fn - 条件函数,返回一个bool值。最高优先级。
  • fnJs - 条件的js代码文本,可获取'pen'和 'context'参数,返回一个bool值。高优先级。
  • key - 通过属性名进行条件比较。低优先级。
  • comparison - 属性比较条件,配合key使用。
    • “>” - 大于
    • “>=” - 大于等于
    • “<” - 小于
    • “<=” - 小于等于
    • “=” - 等于
    • “!=” - 不等于
    • “[)” - 介于,与数学上相同,例如:[0, 100) 0~100,包含0不包含100; [0,100] 0~100,包含0和100
    • “![)” - 不介于,“介于”以外的
    • “[]” - 属于,集合,例如:[1,20,30..50,65] ,1.0.48版本后支持字符串,例如 [1,20,aaa,值1]
    • “![]” - 不属于,上述集合以外的
  • value - 属性比较值,配合key使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/47371.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为的热机备份和流量限制

要求&#xff1a; 12&#xff0c;对现有网络进行改造升级&#xff0c;将当个防火墙组网改成双机热备的组网形式&#xff0c;做负载分担模式&#xff0c;游客区和DMZ区走FW4&#xff0c;生产区和办公区的流量走FW5 13&#xff0c;办公区上网用户限制流量不超过100M&#xff0c;…

Redis实战—附近商铺、用户签到、UV统计

本博客为个人学习笔记&#xff0c;学习网站与详细见&#xff1a;黑马程序员Redis入门到实战 P88 - P95 目录 附近商铺 数据导入 功能实现 用户签到 签到功能 连续签到统计 UV统计 附近商铺 利用Redis中的GEO数据结构实现附近商铺功能&#xff0c;常见命令如下图所示。…

vue3前端开发-如何让自己的网站适合SEO排名规则

vue3前端开发-如何让自己的网站适合SEO排名规则&#xff01;我们大家都知道&#xff0c;原始出生的vue3项目&#xff0c;原始代码层面&#xff0c;是没有meta标签的&#xff0c;也就是说&#xff0c;不适合SEO排名规则。那么我们能不能自己增加呢&#xff1f;答案是&#xff1a…

Photoneo 3D 网格划分

Photoneo 3D 网格划分是一种多功能软件解决方案&#xff0c;专为快速、精确的 3D 模型而设计 从多个 3D 扫描或来自 Photoneo 3D 传感器的连续 3D 数据流创建。它 旨在实现适用于各种应用的高级 3D 数据采集&#xff0c;例如 机器人引导、质量检查和逆向工程。 它以两个单独的库…

本地部署,edge-tts文本转语音解决方案

目录 什么是 edge-tts&#xff1f; 主要特点 应用场景 优势 开始使用 edge-tts 命令行安装 edge-tts 库&#xff1a; docker安装 未来展望 总结 https://github.com/rany2/edge-ttshttps://github.com/rany2/edge-tts 随着科技的进步&#xff0c;文本转语音&#xff…

leetcode145. 二叉树的后序遍历,递归法+迭代法,全过程图解+步步解析,一点点教会你迭代法后序遍历

leetcode145. 二叉树的后序遍历&#xff0c;递归法迭代法 给你一棵二叉树的根节点 root &#xff0c;返回其节点值的 后序遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[3,2,1] 示例 2&#xff1a; 输入&#xff1a;root [] 输出&#…

服务器系统盘存储不够,添加数据盘并挂载(阿里云)

目录 1.获取数据盘设备名称 2.为数据盘创建分区 3.为分区创建文件系统 4.配置开机自动挂载分区 阿里云数据盘挂载说明链接&#xff1a;在Linux系统中初始化小于等于2 TiB的数据盘_云服务器 ECS(ECS)-阿里云帮助中心 1.获取数据盘设备名称 sudo fdisk -lu 运行结果如下所示…

无人机反制:车载侦测干扰一体设备技术详解

车载侦测干扰一体设备是一种综合性的无人机反制解决方案&#xff0c;旨在有效应对各种复杂场景下的无人机威胁。 侦测技术&#xff1a; 1. 雷达侦测 - 脉冲雷达&#xff1a;通过发射短脉冲电磁波&#xff0c;根据回波的时间和强度来确定无人机的位置、速度和形状。 - 连续波雷…

Preceptron感知机

前言 在上一章中&#xff0c;我们讨论了回归问题&#xff0c;主要的任务就是拟合出数据集分布的解析式。而这一次的学习中&#xff0c;我们将关注分类问题。 Classification classification分类有两种&#xff1a;二元分类和多类分类。 二元分类&#xff1a;预测二值目标&am…

【chatgpt】归一化前训练测试集拆分还是归一化后训练测试集拆分

先拆分数据集然后归一化 在进行机器学习建模时&#xff0c;应该先进行训练测试集拆分&#xff08;train-test split&#xff09;&#xff0c;然后对训练集进行归一化&#xff0c;再使用训练集的归一化参数对测试集进行归一化处理。这样可以确保归一化过程不泄露测试集的信息&a…

Laravel+swoole 实现websocket长链接

需要使用 swoole 扩展 我使用的是 swoole 5.x start 方法启动服务 和 定时器 调整 listenQueue 定时器可以降低消息通讯延迟 定时器会自动推送队列里面的消息 testMessage 方法测试给指定用户推送消息 使用 laravel console 启动 <?phpnamespace App\Console\Comman…

华纳云:查看服务器磁盘I/O性能的工具和方法

要查看服务器硬盘的I/O性能&#xff0c;可以使用多种工具和方法。以下是一些常用的命令和工具&#xff1a; 1. 使用 dd 命令 dd 是一个强大的工具&#xff0c;可以用来测试硬盘的读写速度。 测试写性能 dd if/dev/zero of/path/to/testfile bs1M count1024 convfdatasync 测试读…

k8s核心操作_存储抽象_K8S中使用ConfigMap抽取配置_实现配置热更新---分布式云原生部署架构搭建032

现在有个问题,是上面我们利用pv和pvc 就是持久卷 以及 持久卷申请,实现了对存储的,pod删除以后,对其使用的存储空间也进行了删除,那么还有个问题,对于redis这种我们希望,他的配置也管理起来. 比如这个redis的配置文件. 以后其他的配置文件也是这样. 使用配置文件的存储在k8s中…

Spring Boot 中使用 Resilience4j 实现弹性微服务的简单了解

1. 引言 在微服务架构中&#xff0c;服务的弹性是非常重要的。Resilience4j 是一个轻量级的容错库&#xff0c;专为函数式编程设计&#xff0c;提供了断路器、重试、舱壁、限流器和限时器等功能。 这里不做过多演示&#xff0c;只是查看一下官方案例并换成maven构建相关展示&…

【Go系列】Go语言的测试

承上启下 在Go语言中&#xff0c;我们写了代码之后经常就要进行测试。我们可以直接在go函数中调用具体的函数&#xff0c;从而实现测试的目的。但是一旦系统复杂的情况下&#xff0c;我们频繁修改main调用函数就显得不太正常了。那么是不是存在一种方法&#xff0c;让我们可以虚…

代码随想录学习 54day 图论 Bellman_ford 队列优化算法(又名SPFA) 学习

Bellman_ford 队列优化算法&#xff08;又名SPFA&#xff09; 卡码网&#xff1a;94. 城市间货物运输 I 题目描述 某国为促进城市间经济交流&#xff0c;决定对货物运输提供补贴。共有 n 个编号为 1 到 n 的城市&#xff0c;通过道路网络连接&#xff0c;网络中的道路仅允许从…

Hadoop3:RPC通信原理及简单案例实现

一、场景介绍 我们知道&#xff0c;Hadoop中存在多种服务&#xff0c;那么&#xff0c;服务之间是如何通信的了&#xff1f; 比如&#xff0c;DN和NN之间如何通信&#xff1f; 这里&#xff0c;实际上是通过RPC实现进程间通信的了。 RPC属于Java网络编程范畴 需要编写客户端和…

自用自用自用,持续更新,记录部分CPU,显卡,部分跑分软件,游戏帧数参考,自用

自用自用自用&#xff0c;持续更新&#xff0c;记录部分CPU&#xff0c;显卡&#xff0c;部分跑分软件&#xff0c;游戏帧数参考&#xff0c;自用 CPU跑分显卡游戏 CPU跑分 CPUZ单核CPUZ多核R23单核R23多核5800h576.85860.014311270212100f644.43258.31576804313500h763.36658…

AAD Connect自定义同步用户上云

使用场景&#xff1a;我想同步本地AD域的那些用户信息、账号上云端做SSO登录和权限管控&#xff0c;但是不希望使用快速上传一股脑传上去&#xff0c;所以使用自定义同步功能上传&#xff0c;这是一篇对AAD CONNECT这个应用的详解和配置步骤推荐 AD Connect如何自定义配置&…

easyswoole/Hyperf开发的php系统 cpu超负荷定位排查

EasySwoole EasySwoole是一个高性能的PHP协程框架&#xff0c;它利用了协程的特性来提高PHP应用的性能。当使用EasySwoole开发的PHP系统遇到CPU超负荷的问题时&#xff0c;可以从以下几个方面进行全方位排查和优化&#xff1a; 1. 监控系统资源 使用top、htop、vmstat、iost…