canvas的简单介绍(-)

291 阅读2分钟

这是我参与8月更文挑战的第19天,活动详情查看:8月更文挑战

画布

画布(class Topology)是整个绘画载体。

在window全局对象下会注入topology对象,表示当前画布。

// 浏览器 console 或js
window.topology

class Topology的成员变量列表

名称类型默认值描述
parentElemHTMLElementnullcanvas元素的父元素。画布铺满整个父元素
canvasHTMLElementnullhtml的canvas元素,主画布,离屏的图像化显示。
offscreen自定义Canvas类Canvas离屏层
hoverLayer自定义HoverLayer类HoverLayer活动层
activeLayer自定义Activelayer类Activelayer选中层
animateLayer自定义AnimateLayer类AnimateLayer动画层
dataTopologyData 画布数据。新版本可以是topology.pureData()得到精简化数据参考下面:TopologyData表格
clipboardTopologyData剪切板数据。
caches{index:number,list: TopologyData[]}缓存数据。
options自定义Options接口...画布选项。详细描述见下面构造函数
socket{  socket // 原始websocket}画布封装的socket对象
mqtt{  client // 原始mqtt client}画布封装的mqtt对象

Class TopologyData 画布数据的成员列表

名称类型默认值描述
pensPen[]null节点、连线数据集合
lineNamestringcurve当前图文默认连线类型
lineWidthnumber1默认连线宽带
fromArrowstring默认连线起点箭头 
toArrowstringtriangleSolid连线终点默认箭头 
scalenumber1当前图文缩放比例: 0 - 1
bkColorstring画布的背景色
bkImagestring背景图片。修改背景图片前,需要先canvas.clearBkImg清空旧图片
bkImageStaticboolean背景是否跟着移动
gridboolean是否显示背景网格
gridColorstring背景网格颜色
gridSizenumber背景网格格子大小
ruleboolean是否显示背景标尺
ruleColorstring标尺颜色
websocketstringwebsocket url地址,配合节点websocket事件使用。websocket的消息格式为json字符串:{event: '消息名', data: 消息数据}
mqttUrlstringmqtt连接地址url
mqttOptions {    clientId?: string,    username?: string,    password?: string,customClientId?: boolean  } mqtt连接选项customClientId:- 缺省 false, 每次生成随机clientId,避免连接冲突- true,不要随机生成clientId
mqttTopicsstringmqtt订阅主题。多个以英文逗号“,”分隔
lockedenum Lock {  None,  Readonly,  NoEvent}None      (0)  - 未锁定,可任意编辑。Readonly (1) - 只读模式,允许选中NoEvent  (2) - 禁止鼠标交互,无法做任何操作。纯静态画面模式。
tooltipboolean是否显示提示默认显示提示
socketEventbooleannumber服务器消息是否发送事件通知。默认不发送事件。socketEvent === 1时,仅发送事件消息,开发者执行处理,不执行默认行为。socketEvent 非空时,发送事件消息,同时执行默认操作。
socketFnstringjs代码。用于监听mqtt/websocet消息的自定义处理函数。
dataany用于存储用户自定义数据
...any其他任意属性。推荐用独特开头区分业务属性。 0.4.0以上版本支持