画笔

export abstract class Pen
具有公共绘画属性的抽象类。

// es6, npm lib
import { Pen } from 'topology-core/models/pen';
// es5, bundle.js
Le5leTopology.Pen

成员变量列表

名称	类型	默认值	描述
id	string	随机字符串	唯一标识
type	enum PenType { Node = 0, Line = 1, }	Node	画笔类型：是节点还是连线
name	string		名称
rect	自定义Rect类		占据的大小位置，参考 Rect
dash	number	0	仅仅在lineDash未定义时，使用预设样式设置html canvas的setLineDash属性 dash值为数字：0 ，1，2，3中的一个 预设值对应的属性效果： switch (this.dash) { case 1: ctx.setLineDash([5, 5]); break; case 2: ctx.setLineDash([10, 10]); break; case 3: ctx.setLineDash([10, 10, 2, 10]); break; }
value	number		自定义业务用的数字
num1	number		自定义业务用的数字
num2	number		自定义业务用的数字
num3	number		自定义业务用的数字
lineDash	number[]	undefined	html canvas的虚线样式。 例如，值为： [5, 5]
lineWidth	number	1	线宽
strokeStyle	string		线条颜色，可以参考canvas。
fillStyle	string		填充颜色，可以参考canvas。
lineCap	string		末端样式，可以参照canvas。 butt round square
globalAlpha	number	1	透明度，可以参考canvas。
rotate	number	0	旋转角度, 单位°
offsetRotate	number	0	临时偏移旋转角度, 单位°
font	json	{ color: ‘’, background: ‘’, fontFamily: ‘“Hiragino Sans GB”, “Microsoft YaHei”, “Helvetica Neue”, Helvetica, Arial’, fontSize: 12, lineHeight: 1.5, fontStyle: ‘normal’, fontWeight: ‘normal’, textAlign: ‘center’ as CanvasTextAlign, textBaseline: ‘middle’ as CanvasTextBaseline }	字体设置。 0.4.0重构为一维结构。 兼容老数据
animatePlay	boolean		是否自动播放
animateStart	number		动画开始时间。Date.now 执行canvas.animate()开始播放动画 需要停止动画时，设置animateStart = 0，再执行canvas.animate()
animateCycle	number		循环播放次数。默认为空，表示无限循环
animateCycleIndex	boolean	false	当前循环播放了第几次。
nextAnimate	string		自动播放下一个动画的节点/连线的tag
animateAlone	boolean	false	播放动画时，是否孤立，不影响其他节点/连线。 比如，关联的连线不跟着大小位置改变。
animateReverse	boolean		连线动画反向
locked	enum Lock { None, Readonly, NoMove, NoEvent = 10, }		是否锁定 0 - 默认，没有锁； 1 - 只读，可选中，可单击等 2 - 不能移动 10 - 不处理任何事件
stand	boolean		当为子节点时，stand为true，单击直接选中子节点。默认Shift + 单击选中子节点
text	string		文字内容
textMaxLine	number		文字最大显示多少行
textRect	Rect		文字区域
fullTextRect	Rect		为节点时，节点没图标时，文字区域。一般指此时文字区域占据了整个节点
textOffsetX	number		文字相对偏移
textOffsetY	number		文字相对偏移
tags	string[]		tag标签数组
data	any		用于保存自定义数据（业务数据）。
markdown	string		只读模式下，鼠标移动上去，显示markdown提示 依赖https://cdn.jsdelivr.net/npm/marked/marked.min.js 需要自行加载
tipId	string		只读模式下，鼠标移动上去，显示用户自定义的dom提示。dom元素的id属性值
title	string		只读模式下，鼠标移动上去，显示元素html的title提示
visible	boolean		节点是否显示。 默认显示
hideRotateCP	boolean	false	是否禁止旋转控制点
hideSizeCP	boolean	false	是否禁止缩放控制点
hideAnchor	boolean	false	是否禁止连线锚点控制点
events	{ type: EventType; action: EventAction; value: string; params: string; name?: string; }[]		事件数组。 查看示例 如果想执行vue、react等源码中的函数，请用 消息事件 type: 枚举类型，事件类型 enum EventType { Click, DblClick, WebSocket, MQTT } action: 枚举类型，事件行为 enum EventAction { Link, // 跳转链接，0 Animate, // 执行动画，1 Function, // 执行函数，2 WindowFn // 执行window下的全局函数，3 SetProps // 更新属性数据，4 StopAnimate, // 停止动画，5 null, 6 doEmit, 7 // 发送自定义消息 } value: （字符串）事件数据 根据事件行为分别为： - 链接地址； - 要播放动画的画笔tag； - 自定义函数js代码； - window函数名； params：（字符串，多个参数，可以用json字符串） 事件参数，可用于给函数传递的参数。当action=SetProps时，params===’false’，不重绘画布。
wheres	Where [] export interface Where { key?: string; comparison?: string; value?: any; fn?: string; actions?: Action[]; } export interface Action { do?: string; // 或 action，指行为类型：Link，StartAnimate，PauseAnimate，StopAnimate，Function，WindowFn，Emit url?: string; _blank?: string; tag?: string; fn?: string; params?: any; }		条件触发器。 当mqtt/websocket或setValue时，判断是否满足条件，触发action行为。 满足条件1： key - 属性名 comparison - 条件 value - 属性值 if (pen[key] [] value) { // do actions } 满足条件2: fn - 自定义js，优先级高 fn = new Function(fn); if (fn()) { // do actions }
shadowColor	string		阴影颜色。
shadowBlur	number		阴影的模糊级别（数值越大越模糊）
shadowOffsetX	number		阴影与形状的水平距离
shadowOffsetY	number		阴影与形状的垂直距离
whiteSpace	string		nowrap - 全部文字都不换行，一行显示 pre-line - 按照回车换行 默认 - 英文单纯换行（中文单字符即为一个单词）
autoRect	boolean	false	自动根据文字内容宽高设置当前节点宽高。 设置此属性后，执行topology.updateProps(pen)生效
strokeType	number		线条渐变 0 - 纯色（无） 1 - 线性渐变
lineGradientFromColor	string		当 storkeType 为 1 时，有效。 线性渐变起点颜色
lineGradientToColor	string		当 storkeType 为 1 时，有效。 线性渐变终点颜色

成员函数列表

constructor构造函数

constructor(json?: any)

参数

draw绘画函数

abstract draw(ctx: CanvasRenderingContext2D): void
抽象类绘画函数，需要继承者自己实现绘画功能。

参数

hit判断点是否命中此画笔

hit(point: Point, padding = 0)

参数

startAnimate 开始播放/执行动画

startAnimate()

pauseAnimate 暂停动画

pauseAnimate()

下次播放，从暂停状态开始播放

stopAnimate 停止动画

stopAnimate()

下次播放从头开始播放

play 播放/停止音视频

play(pause?: boolean)

下次播放从头开始播放

Events

画笔自定义事件列表。事件数组。

参考：使用指南 https://www.yuque.com/alsmile/topology/rziwg5

当为action为函数时，函数可接受2个固定名称参数（pen, params）。
函数基本能力，可以在该处打印 arguments 查看参数。

pen.events示例

// pen.events = 
[{
  type: 0, // 单击
  action: 0, // Link， 链接
  value: `http://xxxxx`,
  params: '_blank'  
}，{
  type: 1, // 双击
  action: 1, // Animate，动画
  value: `tag`,  // 要播放动画的pen的tag
  params: ''  // 暂时没用
}，{
  type: 1, // 双击
  action: 5, // Animate，动画
  value: `tag`,  // 要停止播放动画的pen的tag
  params: ''  // 暂时没用
}，{
  type: 2, // websocket
  action: 2, // Function，自定义函数
  name: 'event name',  // 监听websocket消息名 
  value: `console.log('pen', pen, 'params', params)`,  // 这里只用写函数函数内容：即js代码
  params: 'ws 收到消息，无需配置'
}，，{
  type: 3, // mqtt
  action: 2, // Function，自定义函数
  name: 'topic name',  // 监听mqtt的topic 
  value: `console.log('pen', pen, 'params', params)`,  // 函数js代码 
  params: 'ws 收到消息，无需配置'
}，{
  type: 0, // 单击
  action: 3, // windowFn，window下的全局函数
  value: `函数名`,  
  params: '{xxxxx,xxxx}'  // 传递给函数的参数，必须为字符串。可以为json字符串，开发者自己parse
}]

websocket示例

// pen.events = 
[{
  type: 2, // websocket
   // websocket的消息格式必须为json字符串：{event: '消息名，如socketTest', data: 消息数据}
  name: 'socketTest', // 监听websocket消息名。 
  action: 2, // Function，自定义函数
  // 参数 pen - 当前画笔；params = websocket消息中的data
  value: `console.log('pen', pen, 'params', params)`,  // 函数js代码
  params: 'ws 收到消息，无需配置'
}]

websocket事件推送的消息格式

{
  event: '消息名，如socketTest', 
  data: 消息数据
}

websocket/mqtt事件推送更新属性的数据格式

// 必须为标准的数组对象或json.stringfy格式
[{
  "id": "id或tag，此字段仅画布事件中有效",
  "key": "属性名，参考文档", 
  "data": "属性值"
}]