当前位置: 首页 > news >正文

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

独立图层

每个图元都有先后绘画顺序,即每个图元拥有一个独立图层,即meta2d.data().pens的数组索引。

可以通过meta2d.top/bottom/up/down等函数改变独立图层顺序。

分组图层

通过标签可以标识一个分组图层,通过meta2d.find('图层标签')获取该图层所有图元。可以控制同一个分组图层的图元的显示/隐藏。(逻辑上的图层)

物理图层

即实际图元绘制的图层。

如图所示,meta2d的绘制图层从上到下有:

  1. 模板层 绘制模板图元。绘制背景颜色、背景图片和背景网格,对应z-index属性为1。
  2. 下层图片绘制层,z-index为2。
  3. 中层 主画布层,z-index为3。
  4. 上层图片绘制层,z-index为4。绘制标尺。
  5. dom图元,可以通过设置zIndex属性去改变他的显示层级。

问题: 哪些是dom图元?

目前官方推出的图形库中echarts图表、highCharts图表、LightningCharts图表、音视频、iframe(网页)、摄像头、gif动图、轮播图、轮播页面等都是dom图元。(开发者可以通过控制台-元素拾取判断)

版本迭代

  1. @meta2d/core version<1.0.28

包括上下两个图片绘制层和中间主画布层。

image图元(非动态的图片)一般绘制在上/下层图片绘制层,可以通过isBottom属性控制上/下。pen.isBottom===ture时,绘制在下层,否则绘制在上层。

问题:为什么要添加两个图片层?

因为canvas绘制图片比较占用性能,我们通过上下两个独立的图片绘制层,去减少图片图元的绘制次数,从而减少性能消耗。而设置两层是为了控制图片可以绘制在其他图元的上方/下方。

  1. 1.0.28≤version≤1.0.35

引入了模版层,对应template属性。pen.template===true时,图元绘制在模版层上。

模版层上的图元可以是除dom图元外的任意图元,甚至是图片。模版层图元应尽可能少的修改,模版层上的图元不支持设置动画。

这个版本可以参考视频:乐吾乐meta2d图元层级问题讲解

问题:为什么要添加模版层?

这是为了处理在低性能设备上,切换的时候会有闪屏/白屏的问题,添加模版层,相同模版的图纸相互切换模版层不会重绘,也就是最底层的画布不会变化,就没有上述的问题了。这刚好和我们大屏的模版也是对应上的,尽可能少的修改、尽可能少的重绘。

  1. version≥1.0.36

该版本以后,图片节点可以绘制在主画布上了。同时,为了简化属性标志,我们弃用了isBottom和template属性,新增了canvasLayer属性。老数据格式在新版本核心库会做相应的转化。

enum CanvasLayer{CanvasTemplate = 1, //模版层   CanvasImageBottom, //下层图片层CanvasMain, //主画布层CanvasImage //上层图片层
}

Copy

在官方编辑器中,选中图片图元后右键:

1. 选择置顶,图片节点会移动到上层图片层绘制(pen.canvasLayer===CanvasLayer.CanvasImage)同时在meta2d.store.data.pens的顺序的最后;

2. 置底会移动到下层图片层绘制(pen.canvasLayer===CanvasLayer.CanvasImageBottom)同时在meta2d.store.data.pens的顺序的最前;

3. 选择上一层/下一层 后,图片节点会移动到主画布层绘制(pen.canvasLayer===CanvasLayer.CanvasMain),此时,更易操作和其他非图片图元层级关系。

需要注意的是:我们上面提过,上层/下层图片层绘制次数更少,性能消耗更小,所以如果没有强制需求,尽量不要操作上一层/下一层,导致将图片节点移动到主画布层。

国产开源

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

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、博文支持

相关文章:

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

独立图层 每个图元都有先后绘画顺序&#xff0c;即每个图元拥有一个独立图层&#xff0c;即meta2d.data().pens的数组索引。 可以通过meta2d.top/bottom/up/down等函数改变独立图层顺序。 分组图层 通过标签可以标识一个分组图层&#xff0c;通过meta2d.find(图层标签)获取…...

基于Redisson实现分布式锁

基于redisson实现分布式锁 之前背过分布式锁几种实现方案的八股文&#xff0c;但是并没有真正自己实操过。现在对AOP有了更深一点的理解&#xff0c;就自己来实现一遍。 1、分布式锁的基础知识 分布式锁是相对于普通的锁的。普通的锁在具体的方法层面去锁&#xff0c;单体应…...

Android Studio下载Gradle特别慢,甚至超时,失败。。。解决方法

使用Android studio下载或更新gradle时超级慢怎么办&#xff1f; 切换服务器&#xff0c;立马解决。打开gradle配置文件 修改服务器路径 distributionUrlhttps\://mirrors.cloud.tencent.com/gradle/gradle-7.3.3-bin.zip 最后&#xff0c;同步&#xff0c;下载&#xff0c;速…...

leetcode--二叉树中的最长交错路径

leetcode地址&#xff1a;二叉树中的最长交错路径 给你一棵以 root 为根的二叉树&#xff0c;二叉树中的交错路径定义如下&#xff1a; 选择二叉树中 任意 节点和一个方向&#xff08;左或者右&#xff09;。 如果前进方向为右&#xff0c;那么移动到当前节点的的右子节点&…...

c++ primer plus 第15章友,异常和其他:15.1.3 其他友元关系

c primer plus 第15章友&#xff0c;异常和其他&#xff1a;15.1.3 其他友元关系 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 15.1.3 其他友元关系 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可…...

uniapp+vue3页面跳转和传参

页面跳转&#xff1a; uni.navigateTo({url: /pages/index}) 返回上一层&#xff1a; uni.navigateBack ({delta: 1 }) 页面跳转时传参&#xff1a; 跳转前的页面&#xff1a; uni.navigateTo({url: "/pages/index?id123"}) 跳转后的页面&#xff1a; onLoa…...

硬链接和软链接

在Linux系统中&#xff0c;链接&#xff08;Link&#xff09;是一种特殊的文件&#xff0c;它指向另一个文件或目录。链接分为两种类型&#xff1a;硬链接&#xff08;Hard Link&#xff09;和软链接&#xff08;也称为符号链接&#xff0c;Symbolic Link&#xff09;。 1. 硬…...

属性描述符初探——Vue实现数据劫持的基础

目录 属性描述符——Vue实现数据劫持的基础 一、属性描述符是什么&#xff1f; ​编辑 1.1、属性描述符示例 1.2、用属性描述符定义属性及获取对象的属性描述符 1.3、带有读取器和设置器的属性描述符 二、使用属性描述符的情景 2.1、封装和数据隐藏 使用getter和setter…...

字节也没余粮了?天底下没有永远免费的GPT-4;AI产品用订阅制就不合理!让用户掏钱的N种定价技巧嘿嘿 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;ShowMeAI官网 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; 1. 当 Coze 也开始收费&#xff1a;天底下没有「永远」免费的 GPT-4 注&#xff1a;这里 Coze 指海外版。国内版 扣子 还是免费。 Coze (海外版) 官网链接 → htt…...

【Matlab 路径优化】基于蚁群算法的XX市旅游景点线路优化系统

基于蚁群算法的XX市旅游景点线路优化系统 &#xff08;一&#xff09;客户需求&#xff1a; ①考虑旅游景点的空间分布、游客偏好等因素&#xff0c;实现了旅游线路的智能规划 ②游客选择一景点出发经过所要游览的所有景点只一次&#xff0c;最后回到出发点的前提下&#xf…...

我关于Excel使用点滴的笔记

本篇笔记是我关于Excel使用点滴的学习笔记&#xff0c;摘要和地址链接列表。临时暂挂&#xff0c;后面可能在不需要时删除。 (笔记模板由python脚本于2024年06月28日 12:23:32创建&#xff0c;本篇笔记适合初通Python&#xff0c;熟悉六大基本数据(str字符串、int整型、float浮…...

【Java安装】windows10+JDK21+IDEA

文章目录 一、JDK安装1. 下载完成后按照自己需要的位置安装2. 配置环境变量2.1 JAVA_HOME变量2.2 PATH配置 3. 验证4. helloworld 二、IDEA安装三、IDEA-HelloWorld 一、JDK安装 JDK安装链接 1. 下载完成后按照自己需要的位置安装 2. 配置环境变量 2.1 JAVA_HOME变量 安装…...

《简历宝典》01 - 一文带你学会如何写一份糟糕透顶的简历

我们每个人几乎都会面对找工作这件事&#xff0c;而找工作或者说求职首先就是要写一份简历。今天狗哥将以一个不同的视角带你写一份无与伦比&#xff0c;糟糕透顶的求职简历&#xff0c;说实话&#xff0c;其实几年前&#xff0c;我就是这么写的。 目录 1. 文件名 2. 基本信…...

多链路聚合通信路由在应急救援活动中的重要性及解决方案

在应急救援指挥活动中&#xff0c;多链路聚合通信设备如同一座坚固的桥梁&#xff0c;将信息快速、准确地传递至每一个角落。面对复杂多变的救援现场&#xff0c;这类设备展现了其卓越的适应性和稳定性。 想象一下&#xff0c;当灾害突然降临&#xff0c;信息的传递变得至关重…...

PyCharm中如何将某个文件设置为默认运行文件

之前在使用JetBrain公司的另一款软件IDEA的时候&#xff0c;如果在选中static main函数后按键altenter可以默认以后运行Main类的main函数。最近在使用PyCharm学习Python&#xff0c;既然同为一家公司的产品而且二者的风格如此之像&#xff0c;所以我怀疑PyCharm中肯定也有类似的…...

【杂交版】植物大战僵尸杂交版v2.1最新版本下载链接

B站游戏作者潜艇伟伟迷于6月13日中午更新了植物大战僵尸杂交版2.1版本&#xff0c;有老版本的也可以完美继承存档数据。 不多废话下载链接放上&#xff1a; 夸克网盘链接&#xff1a;https://pan.quark.cn/s/095de551d1d1 UC网盘链接&#xff1a;https://drive.uc.cn/s/86debb3…...

图像增强及运算篇之图像掩膜直方图和HS直方图

一.图像掩膜直方图 如果要统计图像的某一部分直方图&#xff0c;就需要使用掩码&#xff08;蒙板&#xff09;来进行计算。假设将要统计的部分设置为白色&#xff0c;其余部分设置为黑色&#xff0c;然后使用该掩膜进行直方图绘制&#xff0c;其完整代码如下所示。 # -*- codi…...

Python商务数据分析知识专栏(六)——Python数据分析的应用④Python数据分析实训

Python商务数据分析知识专栏&#xff08;六&#xff09;——Python数据分析的应用④Python数据分析实训 Python数据分析实训一.iris数据处理实训1.1 拓展学习资料&Python环境介绍1.2 读取数据&修改列名称1.3 以PythonConsole方式执行代码1.4 缺失值处理1.5 重置索引 二…...

【Python机器学习】处理文本数据——将文本数据表示为词袋

用于机器学习的文本有一种最简单的方法&#xff0c;也是最有效且最常用的方法&#xff0c;就是使用词袋表示。使用这种表示方法时&#xff0c;我们舍弃了输入文本中的大部分结构&#xff0c;比如章节、段落、句子和格式&#xff0c;只计算语料库中&#xff0c;只计算语料库中每…...

论文写作全攻略:Kimi辅助下的高效学术写作技巧

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 完成论文写作是一个多阶段的过程&#xff0c;涉及到不同的任务和技能。以下是按不同分类总结的向Kimi提问的prompt&#xff0c;以帮助你在论文写作过程中取得成功&#xff1a; 1. 选题与…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...