用户使用手册 #

开始设计： http://t.le5le.com/

1 基本知识 #

1.1 画布 #

画布即绘画区域

1.2 菜单栏 #

顶部菜单导航，可设置Logo、公司名称、文件编辑、钢笔、铅笔、放大镜、缩略图、连线起点、连线终点、连线线宽、视图比例、自动锚点、禁用锚点、编辑/预览/锁定/、预览、分享、帮助、语言、登录

1.3 组件库 #

组件库功能：搜索、图纸、系统组件、我的组件、图形库管理

1.3.1 图形 #

绘画对象，分为节点和连线2种

节点 #

连线 #

连线是用于绘画的线条，可以选择钢笔工具绘制连线(快捷键V)

1.4 属性面板 #

1.4.1 文件属性面板 #

1.4.2 图形属性面板 #

1.4.3 多选属性面板 #

对齐：左对齐、右对齐、顶部对齐、底部对齐、垂直居中、水平剧中、等距分布左右对齐、等距分布上下对齐、相同

1.5 右键菜单 #

鼠标右键或平板三指触摸显示右键菜单

功能：置顶、置底、上一个图层、下一个图层、组合、组合为状态、锁定、删除、撤销、恢复、剪切、复制、粘贴

组合为状态：常用于展示开关的断开与闭合、风机的转动与停止、警示灯的状态切换等

使用参考：http://developer.le5le.com/tutorial/data.html#状态

2 基本操作 #

2.1 文件 #

文件：文件的新建、打开、导入、保存、另存为、下载JOSN文件、下载ZIP打包文件、导出为HTML、下载为PNG、下载为SVG

2.1.1 设置文件名、文件夹名、分类 #

属性面板的文件夹即组件库图纸文件夹

2.1.2 设置画布属性 #

默认颜色：预先设置默认颜色，拖拽到画布的节点（基础图形、文字、icon）自动统一默认颜色。

画笔填充颜色：预先设置画笔填充颜色，拖拽到画布的节点（基础图形）自动统一默认填充颜色。

背景颜色

背景网格、网格颜色、网格大小、网格角度

标尺、标尺颜色

2.1.3 设置文件通信 #

支持主流的websocket、MQTT、http协议，能够“0代码”实现消息通信、数据实时修改和触发事件交互。

2.1.4 设置文件布局 #

​画布和组件的排版布局

2.1.5 设置文件结构 #

可编辑：可以编辑属性事件
被锁定：可以执行事件和交互
被禁用 ：不能选中，完全不出发任何事件，可以当背景底图

2.2 锚点编辑 #

添加/删除锚点（A）：节点（包括图形、图片等）和连线都可以添加/删除锚点
移动锚点（G）:将光标移动到锚点上，按一下快捷键G，拖动鼠标完成锚点移动
添加手柄（H）
删除手柄（D）
切换手柄类型（Shift）：①两端手柄完全对称 ②一端手柄可以任意伸缩长度 ③一端手柄可以任意伸缩长度和变换角度

2.3 拖拽编辑 #

可拖拽任意节点到画布

也可以单击选定节点，再单击画布放置节点

2.4 连线 #

钢笔绘制连线

开始：单击左键

暂停：单击右键 或 enter

结束：esc

绘制横线：按下快捷键ctrl,点击鼠标左键绘制，右键结束绘制

绘制竖线：按下快捷键alt,点击鼠标左键绘制，右键结束绘制

连接绘制连线

曲线

线段

直线

脑图曲线

起点样式

终点样式

线宽

连线变成节点、节点变成连线、切割连线、合并连线

连线变成节点、节点变成连线：右键

切割连线：选中线，移入线锚点，按下 S

合并连线：线连接线时，按下 alt

2.5 外观设置 #

2.5.1 位置和大小 #

设置节点的外观样式

角度：设置尖角与圆角，值的范围：0~1

旋转：设置图形的旋转角度

进度：任意封闭图形，都可以当进度条：矩形、圆、svg、封闭连线、或其他任意封闭图形，值的范围：0~1

案例：通常用进度来代表水位高低

2.5.2 样式 #

设置连线的外观样式

案例：用连线丰富的外观属性，绘制武地铁线路图demo

2.5.3 文字 #

2.5.3 图片 #

2.5.4 字体图标 #

3 事件 #

3.1 事件 #

添加相应事件，即可实现相应的事件行为

事件类型：鼠标移入、鼠标移出、选中、取消选中、鼠标按下、鼠标弹起、单击、双击

事件行为：打开链接、更改属性、执行动画、暂停动画、停止动画、执行JavaStript、执行Window函数、自定义消息

3.2 条件触发器 #

根据数据触发报警

条件触发器案例：参考消息事件-条件触发器

4 动效 #

4.1 节点动画 #

给节点添加动画、鼠标提示，设置动画时长、动画效果、循环次数、下个动画tag、是否自动播放、是否保持动画状态

动画效果：无、上下跳动、左右跳动、心跳、成功、警告、错误、炫耀、自定义

自定义动画示例1：进度条，通常用来展示水位变化

自定义动画示例2：特殊效果

4.2 连线动画 #

给连线添加动画、鼠标提示，设置动画效果、动画颜色、动画速度、正反流动方向、循环次数、下个动画tag、是否自动播放、是否保持动画状态

动画效果：水流、水珠流动、圆点

案例：连线动画常常用于展示管道水流/能源等流动方向

案例地址：https://t.le5le.com/?id=63071758288d77e4cee19a6f

4.3 鼠标提示 #

参考Markdown语法编写鼠标提示

4.4 视频video #

video标签支持MP4、WebM、Ogg 三种格式

4.5 网页iframe #

5 数据 #

绑定变量，快速实现实时数据动态展示

绑定变量示例

参考视频：https://www.bilibili.com/video/BV1Yd4y1D7ys?spm_id_from=333.999.0.0

6 消息通信 #

6.1 mqtt通信 #

参考：开发教程 - 实时数据监听

6.2 websocket通信 #

参考：开发教程 - 实时数据监听

6.3 消息通信案例 #

实时数据监听-消息通讯

7 常用菜单基本命令 #

7.1 钢笔 #

开始：单击左键

暂停：单击右键 或 enter

结束：esc

闭合/取消闭合：enter

7.2 铅笔 #

开始：连续拖动左键

暂停：释放左键

结束：esc

闭合/取消闭合：enter

7.3 放大镜 #

7.4 缩略图 #

7.5 自动锚点 #

​开启时自动选择2个最近锚点，关闭时可自由选择锚点

7.6 禁用锚点 #

​禁用锚点，即不显示锚点

8 组件库 #

8.1 图纸 #

新建文件夹、新建图纸、删除文件夹、删除图纸

8.2 系统组件 #

搜索：输入关键词可以搜索相应的系统组件
取消搜索：删除关键词，回车

图形库管理：不常用的图形可以取消勾选，提升加载速度

8.3 我的组件 #

新建文件夹、上传图片、创建组件、删除文件夹、删除我的组件

例如常用的电网图元组合可以组合成一个组件，保存在“我的组件”里面，方便下次直接拖拽使用，同时也可以将绘制好的组件下载JSON分享给同事使用

9 图形库 #

乐吾乐图形库一共分为三大类：基础图形库、电力图形库、物联网图形库，总共约3700个图元，能满足大部分行业的基本需求。 格式有三种：原生代码（JS）、阿里字体（iconfont）、图片（svg、gif），企业版已经写好固定的逻辑，支持良好。
同时乐吾乐Topology支持扩展自定义图库：http://developer.le5le.com/topology-documents/tutorial/make-component.html

​ 点击查看系统组件：http://t.le5le.com/

如何搜索：系统组件

常用基础组件：文字、图片、视频、iframe、icon

9.1 基础图形库 #

9.2 电力图形库 #

9.3 物联网图形库 #

开始设计： http://t.le5le.com/

快捷键：http://developer.le5le.com/tutorial/keyboards.html

解决方案：http://topology.le5le.com/search