【乐吾乐2D可视化组态编辑器】自定义图形库

乐吾乐2D可视化组态软件图形库是一种可扩展、开放性的图形库，可根据不同的需求定制各种酷炫的组件效果和场景。

常用的方式有：①原生代码图形库、②字体图形库、③svg 图形库、④图片、⑤组合图形，以下主要从性能和开发成本维度考量，用户可以结合实际场景综合选择。

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

---

一、原生代码图形库

1.使用

参考链接：
https://doc.le5le.com/document/119832713 

2.特点

• 性能优异；
• 可直接通过属性控制图元样式，方便mqtt、websocket通信；
• 支持事件导致的图元内样式变化；
• 难度大，开发成本高。

3.示例

• 水位变化动态展示，也可以用圆柱形进度条替代。
• 进度条和按钮，进度条实现了通过鼠标拖动改变当前进度条位置及对应的数值，按钮实现了鼠标经过的样式调整。适用于表单的提交
• 刻度尺，实现了调节量程、主从刻度线的数量、显示格式等，状态随着当前值的改变而改变。适用于监测水位、环境温度等。
• 指示灯，实现了通过一个开关控制指示灯的闪烁，还可以修改指示灯的形状和切换为立体效果图片。适用于警报。
• 开关闸门，实现了开启和闭合状态，适用于动态监控。
• 图表-le5le charts

水位变化

进度条和按钮

刻度尺

指示灯

开关闸门

le5le charts

---

二、字体图形库

1.使用

参考链接：
https://doc.le5le.com/document/119832230 

2.特点

• 性能较好，开发成本较低；
• 可以修改图标颜色，但颜色统一；
• 支持批量引入，例如国家电网图元规范和电气工程常用字母和符号。

3.示例

• 国家电网图元和电气工程图元，可修改图标颜色及位置等。

国家电网图元

---

三、svg图形库

1.使用

参考链接：
https://doc.le5le.com/document/119826576 

2.特点

• 矢量不失真，颜色、背景等随意切换；
• 性能接近js，制作快，成本低，能够快速实现需求；
• svg语法规则较多，css动画和一些复杂逻辑还需要持续完善，欢迎大家参与开源贡献：
• https://github.com/le5le-com/meta2d.js/tree/main/packages/svg

3.示例

• 打开文件，选择一个 svg，点击画布即可放置。系统组件中的 SVG 国家电网 ，SVG 电气工程 文件夹。

svg国家电网

---

四、图片

1.使用

将图片上传到服务器，将节点的image属性设置为图片的资源路径。

2.特点

• 开发成本较低；
• 更加生动形象，支持含有纹理、质感等更复杂化的图案；
• 支持动态图片；
• 图元内样式固定，不支持事件导致图元内的样式变化，替代方案为：事件导致图片切换；
• 性能较低。

3.示例

• 官网中以iot开头的组件库和2.5D科技风图形库均为为图片类型组件，有静态和动态2种类型切换，如图展示了示例图中发动机这样的单个复杂图形，推荐使用图片，更生动展示图案的质感纹理等。

图片格式-静态/动态图片

图片格式-柴油发动机

---

五、组合图形

1.使用

在官网编辑器中可选择多个图形右键菜单选择组合/组合为状态。

2.特点

• 图元可拼接组合为任意想要的方式；
• 可以对组合节点中的任意子节点进行节点的处理操作；
• 有利于节点复用；
• 组合为状态可以切换组件的状态模式：例如开和关，风机的转动与停止等。

3.示例

• 如图所示，第一行为通过纯代码绘制的图元，下方为原生代码节点和图片节点组合后的组合图元，这种方式适用于图元含有复杂的结构，但是我们所需要的控制的只是结构中的一小部分。而其他部分是从不变化的。可保存在“我的组件”中。

组合图形

• 如图所示，将特殊图元里面的水位图（js）与加药箱（png）组合成为一个新的图元，可以看到加药箱水位随着数据动态变化

• 右键组合为状态，例如开和关，风机的转动与停止，报警灯等多状态切换。

组合为状态