网站建设方案 前台 后台,营销和销售的区别,让蜘蛛不抓取网站的文件夹,网络设计方案是如何体现网络设计需求的?独立图层
每个图元都有先后绘画顺序#xff0c;即每个图元拥有一个独立图层#xff0c;即meta2d.data().pens的数组索引。
可以通过meta2d.top/bottom/up/down等函数改变独立图层顺序。
分组图层
通过标签可以标识一个分组图层#xff0c;通过meta2d.find(图层标签)获取…独立图层
每个图元都有先后绘画顺序即每个图元拥有一个独立图层即meta2d.data().pens的数组索引。
可以通过meta2d.top/bottom/up/down等函数改变独立图层顺序。
分组图层
通过标签可以标识一个分组图层通过meta2d.find(图层标签)获取该图层所有图元。可以控制同一个分组图层的图元的显示/隐藏。逻辑上的图层
物理图层
即实际图元绘制的图层。 如图所示meta2d的绘制图层从上到下有
模板层 绘制模板图元。绘制背景颜色、背景图片和背景网格对应z-index属性为1。下层图片绘制层z-index为2。中层 主画布层z-index为3。上层图片绘制层z-index为4。绘制标尺。dom图元可以通过设置zIndex属性去改变他的显示层级。 问题: 哪些是dom图元
目前官方推出的图形库中echarts图表、highCharts图表、LightningCharts图表、音视频、iframe(网页)、摄像头、gif动图、轮播图、轮播页面等都是dom图元。开发者可以通过控制台-元素拾取判断
版本迭代
meta2d/core version1.0.28
包括上下两个图片绘制层和中间主画布层。
image图元非动态的图片一般绘制在上/下层图片绘制层可以通过isBottom属性控制上/下。pen.isBottomture时绘制在下层否则绘制在上层。 问题为什么要添加两个图片层
因为canvas绘制图片比较占用性能我们通过上下两个独立的图片绘制层去减少图片图元的绘制次数从而减少性能消耗。而设置两层是为了控制图片可以绘制在其他图元的上方/下方。 1.0.28≤version≤1.0.35
引入了模版层对应template属性。pen.templatetrue时,图元绘制在模版层上。
模版层上的图元可以是除dom图元外的任意图元甚至是图片。模版层图元应尽可能少的修改模版层上的图元不支持设置动画。
这个版本可以参考视频乐吾乐meta2d图元层级问题讲解 问题为什么要添加模版层
这是为了处理在低性能设备上切换的时候会有闪屏/白屏的问题添加模版层相同模版的图纸相互切换模版层不会重绘,也就是最底层的画布不会变化就没有上述的问题了。这刚好和我们大屏的模版也是对应上的尽可能少的修改、尽可能少的重绘。 version≥1.0.36
该版本以后图片节点可以绘制在主画布上了。同时为了简化属性标志我们弃用了isBottom和template属性新增了canvasLayer属性。老数据格式在新版本核心库会做相应的转化。
enum CanvasLayer{CanvasTemplate 1, //模版层 CanvasImageBottom, //下层图片层CanvasMain, //主画布层CanvasImage //上层图片层
}
Copy
在官方编辑器中选中图片图元后右键
1. 选择置顶图片节点会移动到上层图片层绘制pen.canvasLayerCanvasLayer.CanvasImage同时在meta2d.store.data.pens的顺序的最后
2. 置底会移动到下层图片层绘制pen.canvasLayerCanvasLayer.CanvasImageBottom同时在meta2d.store.data.pens的顺序的最前
3. 选择上一层/下一层 后图片节点会移动到主画布层绘制pen.canvasLayerCanvasLayer.CanvasMain此时更易操作和其他非图片图元层级关系。
需要注意的是我们上面提过上层/下层图片层绘制次数更少性能消耗更小所以如果没有强制需求尽量不要操作上一层/下一层导致将图片节点移动到主画布层。 国产开源
乐吾乐潜心研发自主可控持续迭代优化
GithubGitHub - 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、博文支持
