【国产开源可视化引擎Meta2d.js】图元

图元

又称画笔Pen。图形表达的基本元素,组成图像的基本单元。

构成

每一个图元由ID、名字、类型、属性(数据)组成。

ID

名为“id”的特殊属性,图元实例(画布上的图元对象)的唯一标识。拖拽到画布或创建一个图元对象时,自动生成。可以修改,但需要保证唯一性。自定义图形库时不能写死。

名字

名为“name”的特殊属性,用于区分不同的图形。例如正方形、圆、连线、开关、报警灯等。

类型

名为“type”的特殊属性,用于区分节点node连线line

  • 节点 - 没有轨迹的普通图形,具有逐帧动画。

  • 连线 - 包含起点终点的轨迹线条,只有轨迹动画,没有逐帧动画。

属性(数据)

属性即数据。图元属性数据分通用属性自定义数据

  • 通用属性 - Meta2d.js内核支持的通用规则属性。

常用通用属性有: id,name,type,rect,text,anchors、color、background等。

  • 自定义数据 - 图元自身独有数据,用于显示或业务逻辑。可以任意添加自定义数据。

添加

符合格式的 json 数据即图元。例如:

// 矩形 
const pen = {   name: "rectangle",   text: "矩形",   x: 100,   y: 100,   width: 100,   height: 100, }; 
// 方式1:添加到画布,并选中,会触发生命周期函数beforeAddPen 
meta2d.addPen(pen); // 方式2:仅添加画笔,不选中,不触发生命周期函数,不重绘(不立刻显示),可用于批量添加后,一次重绘 
meta2d.canvas.makePen(pen); 
// 选中高亮 
meta2d.active([pen]); 
// 重绘显示 
meta2d.render();

上面代码,可直接在 2d.le5le.com 官网在线编辑器或 meta2d 实例页面的控制台执行

查找

const pen = {id: "唯一id,缺省自动生成",name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,tags: ["tag-rectangle"],
};
meta2d.addPen(pen);// 方法1:通过id查找
const pen1 = meta2d.findOne(pen.id);// 方法2:通过tag查找。find函数返回的是数组
const pens = meta2d.find("tag-rectangle");

更新

const pen = {id: "唯一id,缺省自动生成",name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,tags: ["tag-rectangle"],
};
meta2d.addPen(pen);// 方法1:通过id查找修改
meta2d.setValue({id: pen.id,color: "red",
});// 方法2:通过tag(批量)修改,满足条件的都将修改
meta2d.setValue({tag: 'tag-rectangle',color: "red",
});

选中

const pen = {name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,
};
meta2d.addPen(pen);// 选中
meta2d.active([pen]);// 取消选中
meta2d.inactive();// 查看是否选中
console.log(pen.calculative.active);// 查看选中图元
console.log(meta2d.store.active)

区域

每个图元需要有一个宽高不为0的区域,即x,y,width,height

const pen = {name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,
};
meta2d.addPen(pen);// 获取区域坐标
meta2d.getPenRect(pen)// 设置图元坐标
meta2d.setPenRect(pen,{x,y,width,height})

注意】如果pen为根元素,坐标为>1的像素;如果pen为子元素,坐标为相对父元素的纯小数表示的百分比。

交互事件

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

  • 鼠标进入 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: { key: "text", comparison: "==", value: "矩形" }, // 触发条件value: "2d.le5le.com",},],
};
meta2d.addPen(pen);// 
enum EventAction {Link, 					// 打开链接SetProps,				// 设置属性StartAnimate,   // 执行动画PauseAnimate,   // 暂停动画StopAnimate,    // 停止动画Function,       // 执行JS代码WindowFn,       // 执行全局函数Emit,           // 发送消息
}

国产开源

乐吾乐潜心研发,自主可控,持续迭代优化

Github:GitHub - le5le-com/meta2d.js: The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实时数据响应和交互的2d引擎,可用于Web组态,物联网,数字孪生等场景。

Gitee: meta2d.js: The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实时数据响应和交互的2d引擎,可用于Web组态,物联网,数字孪生等场景。

欢迎Star、Fork、博文支持

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

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

相关文章

【线性代数的本质】矩阵与线性变换

线性变化要满足两点性质: 直线(连续的点)在变换后还是直线。原点不变。 假设有坐标轴(基底) i ^ \widehat{i} i 和 j ^ \widehat{j} j ​: i ^ [ 1 0 ] , j ^ [ 0 1 ] \widehat{i}\begin{bmatrix} 1 \…

《昇思25天学习打卡营第6天|网络构建》

文章目录 前言:今日所学:1. 定义模型类2. 模型层3. 模型参数 前言: 在第六节中我们学习了网络构建,了解了神经网络模型是由神经网络层和Tensor操作构成,我们使用的mindspore.nn中提供了常见的升级网络层的实现&#x…

在线图片转文字的软件,分享3种强大的软件!

在信息爆炸的时代,图片作为信息的重要载体之一,其内容往往蕴含着巨大的价值。然而,面对海量的图片信息,如何高效、准确地将其转化为文字,成为了许多人的迫切需求。今天,就为大家盘点几款功能强大的在线图片…

【python基础】—如何理解安装程序时要配置Widows和DOS操作系统中的path环境变量?

文章目录 前言一、环境变量是什么?二、为什么需要设置环境变量?三、配置anaconda的环境变量 前言 在安装一些程序的时候, 我们总是需要将安装路径配置到正在使用电脑的环境变量里。为什么要进行这一步呢?本文主要解释Widows和DOS…

特殊用途二极管+二极管故障检测+三极管(BJT)的工作原理+定时器的使用(小灯定时闪烁实现)

2024-7-5,星期五,17:27,天气:晴,心情:晴。今天没有什么特殊的事情发生,继续学习啦,加油加油!!! 今日完成模电自选教材第二章内容的学习&#xff…

1-4 NLP发展历史与我的工作感悟

1-4 NLP发展历史与我的工作感悟 主目录点这里 第一个重要节点:word2vec词嵌入 能够将无限的词句表示为有限的词向量空间,而且运算比较快,使得文本与文本间的运算有了可能。 第二个重要节点:Transformer和bert 为预训练语言模型发…

【ABB】原点设定

【ABB】原点设定 操作流程演示 操作流程 操作轴回原点编辑电机校准偏移更新转速计数器 1.首先得了解机器手的轴,这里以6轴作参考。 注意先回456轴,后回123轴。 2.然后需要了解机器人关节运动模式,即选择如下两个模式。 3.注意机器人各轴移动…

QT的编译过程(底层逻辑)

qmake -project 用于从源代码生成项目文件,qmake 用于从项目文件生成 Makefile,而 make 用于根据 Makefile 构建项目。 详细解释: qmake -project 这个命令用于从源代码目录生成一个初始的 Qt 项目文件(.pro 文件)。它…

吃顿饭的时间,用AI开发一个应用官网

最早接触开发时做的第一个项目就是企业官网,到后来自己开始走上独立开发者的道路时,哪怕是开发面向消费者的移动端产品,在产品上架时也需要提供应用官网。 感觉,编程这件事情和官网开发,紧密相连。 过往为了追求开发效…

个人微信 微信营销系统

个人微信 微信营销系统 CRM系统

Windows 玩转大模型第一天:大模型本地部署,调用大模型API可直接工程化应用(全部代码和详细部署流程)

Ollama 是一个开源框架,专为在本地机器上便捷部署和运行大型语言模型(LLM)而设计。 以下是其主要特点和功能概述: 1. 简化部署:Ollama 目标在于简化在 Docker 容器中部署大型语言模型的过程,使得非专业用…

ELK日志系统和Filebeat采集器的学习总结

ELK是ElasticSerach、Logstash、Kina Logstash负责采集数据,Logstash有三个插件,input、filter、output,filter插件作用是对采集的数据进行处理,过滤的,因此filter插件可以选,可以不用配置。 ElasticSear…

vulnhub靶场之DC-1

1 信息收集 1.1 主机发现 arp-scan -l 主机ip地址为:192.168.1.4 1.2 端口服务扫描 nmap -sS -sV -A -T5 -p- 192.168.1.4 开发22,80,111端口 1.3 目录扫描 dirsearch -u 192.168.1.4 2 渗透测试 2.1 先访问一下80端口 发现是一个…

K8S 部署 EFK

安装说明 系统版本为 Centos7.9 内核版本为 6.3.5-1.el7 K8S版本为 v1.26.14 ES官网 开始安装 本次安装使用官方ECK方式部署 EFK,部署的是当前的最新版本。 在 Kubernetes 集群中部署 ECK 安装自定义资源 如果能打开这个网址的话直接用这个命令安装,打不开的话…

半导体制造企业 文件共享存储应用

用户背景:半导体设备(上海)股份有限公司是一家以中国为基地、面向全球的微观加工高端设备公司,为集成电路和泛半导体行业提供具竞争力的高端设备和高质量的服务。 挑战:芯片的行业在国内迅猛发展,用户在上海…

科研绘图系列:R语言STAMP图(STAMP Plot)

介绍 STAMP图(STAMP plot)并非一个广泛认知的、具有特定名称的图表类型,而是可能指在STAMP(Statistical Analysis of Metagenomic Profiles:“STAMP: statistical analysis of taxonomic and functional profiles”)软件使用过程中生成的各种统计和可视化图表的总称。ST…

Ubuntu 24.04 上安装 Kubernetes,超级详细的教程!

Kubernetes 是一个免费的开源容器编排工具,它允许基于容器的应用程序的自动化部署、扩展和管理。 我们将介绍如何使用 Kubeadm 逐步在 Ubuntu 24.04 上安装 Kubernetes 此次演示中,我们将使用以下三个 Ubuntu 24.04 实例 Instance 1 : Master Node (k…

Studying-代码随想录训练营day30| 452.用最少数量的箭引爆气球、435.无重叠区间、763.划分字母区间

第30天,贪心part04,加油,编程语言:C 目录 452.用最少数量的箭引爆气球 435.无重叠区间 763.划分字母区间 总结 452.用最少数量的箭引爆气球 文档讲解:代码随想录用最少数量的箭引爆气球 视频讲解:手…

一站式天气预报解决方案,API接口轻松接入

天气对我们的日常生活有着重要的影响,无论是出门旅行还是安排工作,都需要提前了解天气情况。WAPI平台提供了一站式天气预报解决方案,通过简单的API接口,轻松获取各类天气预报数据。 这个API接口提供了丰富的天气预报信息&#xf…

AI Agent技术的最新进展与改变世界的典型项目巡礼

AI Agent 探索 1. AI Agent 技术发展以及典型项目 1.0 前 AI Agent 时代 在学术探索的浩瀚星空中,机器人技术领域的璀璨明珠莫过于Agent技术的深入研究,这一领域历来是创新与突破的温床。回溯至大模型浪潮兴起之前,Agent技术的辉煌篇章便已…