这是我参与8月更文挑战的第19天,活动详情查看:8月更文挑战”
画布
画布(class Topology)是整个绘画载体。
在window全局对象下会注入topology对象,表示当前画布。
// 浏览器 console 或js
window.topology
class Topology的成员变量列表
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| parentElem | HTMLElement | null | canvas元素的父元素。画布铺满整个父元素 |
| canvas | HTMLElement | null | html的canvas元素,主画布,离屏的图像化显示。 |
| offscreen | 自定义Canvas类 | Canvas | 离屏层 |
| hoverLayer | 自定义HoverLayer类 | HoverLayer | 活动层 |
| activeLayer | 自定义Activelayer类 | Activelayer | 选中层 |
| animateLayer | 自定义AnimateLayer类 | AnimateLayer | 动画层 |
| data | TopologyData | 画布数据。新版本可以是topology.pureData()得到精简化数据参考下面:TopologyData表格 | |
| clipboard | TopologyData | 剪切板数据。 | |
| caches | {index:number,list: TopologyData[]} | 缓存数据。 | |
| options | 自定义Options接口 | ... | 画布选项。详细描述见下面构造函数 |
| socket | { socket // 原始websocket} | 画布封装的socket对象 | |
| mqtt | { client // 原始mqtt client} | 画布封装的mqtt对象 |
Class TopologyData 画布数据的成员列表
| 名称 | 类型 | 默认值 | 描述 | |
|---|---|---|---|---|
| pens | Pen[] | null | 节点、连线数据集合 | |
| lineName | string | curve | 当前图文默认连线类型 | |
| lineWidth | number | 1 | 默认连线宽带 | |
| fromArrow | string | 无 | 默认连线起点箭头 | |
| toArrow | string | triangleSolid | 连线终点默认箭头 | |
| scale | number | 1 | 当前图文缩放比例: 0 - 1 | |
| bkColor | string | 无 | 画布的背景色 | |
| bkImage | string | 无 | 背景图片。修改背景图片前,需要先canvas.clearBkImg清空旧图片 | |
| bkImageStatic | boolean | 背景是否跟着移动 | ||
| grid | boolean | 是否显示背景网格 | ||
| gridColor | string | 背景网格颜色 | ||
| gridSize | number | 背景网格格子大小 | ||
| rule | boolean | 是否显示背景标尺 | ||
| ruleColor | string | 标尺颜色 | ||
| websocket | string | websocket url地址,配合节点websocket事件使用。websocket的消息格式为json字符串:{event: '消息名', data: 消息数据} | ||
| mqttUrl | string | mqtt连接地址url | ||
| mqttOptions | { clientId?: string, username?: string, password?: string,customClientId?: boolean } | mqtt连接选项customClientId:- 缺省 false, 每次生成随机clientId,避免连接冲突- true,不要随机生成clientId | ||
| mqttTopics | string | mqtt订阅主题。多个以英文逗号“,”分隔 | ||
| locked | enum Lock { None, Readonly, NoEvent} | None (0) - 未锁定,可任意编辑。Readonly (1) - 只读模式,允许选中NoEvent (2) - 禁止鼠标交互,无法做任何操作。纯静态画面模式。 | ||
| tooltip | boolean | 是否显示提示默认显示提示 | ||
| socketEvent | boolean | number | 服务器消息是否发送事件通知。默认不发送事件。socketEvent === 1时,仅发送事件消息,开发者执行处理,不执行默认行为。socketEvent 非空时,发送事件消息,同时执行默认操作。 | |
| socketFn | string | js代码。用于监听mqtt/websocet消息的自定义处理函数。 | ||
| data | any | 用于存储用户自定义数据 | ||
| ... | any | 其他任意属性。推荐用独特开头区分业务属性。 0.4.0以上版本支持 |