画布基本元素之一，继承于画笔

  1. // es6, npm lib
  2. import { Node } from 'topology-core/models/node';
  4. // es5, bundle.js
  5. Le5leTopology.Node

成员变量列表

继承于画笔的成员变量这里省略，请参考画笔
仅仅标*字段和rect里面的width、height为必须，其他字段可按需选择

所有整数类型，需要用户确保是数字类型，否则可能出错。

名称 类型 默认值 描述
name* string 节点名称，指用什么节点图形绘画节点形状。

例如： rectangle 指矩形，circle为圆形等

必须是有效的内置节点名，或有效的自定义（注册）节点名称。否则无法识别
is3D boolean false 是否是3D模型
z number z坐标
zRotate number z轴旋转角度°
borderRadius number 0 圆角。宽/高的百分比小数形式

<1,百分比小数形式
>1,像素
bkType number 0 背景色类型
0 - 纯色背景，配合fillStyle属性生效。
1 - 线性渐变，配合设置下面属性：
gradientFromColor
gradientToColor
gradientAngle
2 - 径向渐变，配合设置下面属性
gradientFromColor
gradientToColor
gradientRadius
gradientFromColor string 渐变起始颜色
gradientToColor

string		 渐变终点颜色
gradientAngle

number		 线性渐变角度方向
gradientRadius

number		 径向渐变半径
iconFamily string 字体图标字体名称

（字体文件css或字体项目设置中找，不知道的，请自行教程字体图标的使用）
icon string [前提]：
1. 加载字体文件
1. 正确设置上面的iconFamily


icon的值为：字体图标Unicode编码字符串
格式：’\ue64d’

icon是一个长度为1的特殊字符，’\ue64d’是编码表示法。如果不确定字符内容是否写法正确，用icon.length大小判断；或用下面的String相关函数转换。

iconfont上显示的是“”，需要把前面的“&#x”替换成“\u”

如果是十进制的unicode编码58953，需要使用JS编码函数转换：String.fromCharCode(58953)

如果从后端拿到的是纯编码字符串，非长度为1的Unicode字符（画布上无法显示），需要先转码：
String.fromCharCode(+’0xe64d’)
注意，这个不再是\u，而是十六进制字符串

如果想要查看当前 icon 对应的十六进制字符串，icon.charCodeAt().toString(16) 。
iconSize number 字体图标大小
iconColor string 字体图标颜色
image string 图片图标url，优先于字体图标显示。
imgNaturalWidth number 图片图标原始宽，自动计算
imgNaturalHeight number 图片图标原始高，自动计算
imageWidth number 图片图标显示宽
imageHeight number 图片图标显示高
imageRatio boolean true 是否保存图片长宽比
imageAlign string center 图片位置
center
top
bottom
left
right
left-top
right-top
left-bottom
right-bottom
iconRotate number 图标/图片旋转角度（°）
iconRect 自定义Rect 图标占据空间
fullIconRect 自定义Rect 没有文字，仅存在图标时占据的空间
text string 文字内容
textMaxLine number 文本最大显示行数
textRect 自定义Rect 文本占据空间
fullTextRect 自定义Rect 没有图标，仅存在文字时占据的空间
paddingTop number | string 节点内边距。如果是数字，表示像素；如果带百分号%，表示比例计算。

用于用户输入。
paddingBottom number | string
paddingLeft number | string
paddingRight number | string
paddingTopNum number 自动计算的padding数字。

用于计算图标、文字等区域，直接使用。
paddingBottomNum number
paddingLeftNum number
paddingRightNum number
anchors Point[] 锚点。用于线的连接点
manualAnchors Point[] 自定义锚点
rotatedAnchors Point[] 旋转后的锚点
dockWatchers Point[] 移动节点时，停靠点的参考位置
children Node[] 子节点
stand boolean 作为子节点是否能被独立选中
hideInput boolean 双击不显示输入框


hideRotateCP		 boolean 不显示旋转
hideSizeCP boolean 不显示缩放控制点


hideAnchor		 boolean 不显示锚点
disableSizeX boolean 否 控制点只能改变节点width
disableSizeY boolean 否 控制点只能改变节点height
rectInParent {
x: number | string;
y: number | string;
width: number | string;
height: number | string;
marginTop?: number | string;
marginRight?: number | string;
marginBottom?: number | string;
marginLeft?: number | string;
rotate: number;
}		 如果作为子节点，必须包含

x、y - 相对于父节点的坐标
widht、height - 宽高
margin - 间隔
rotate - 旋转

其中x、y、widht、height数字表示像素；%表示父节点的百分比。

具体计算方法，见下图2：
animateType string 0 动画辅助数据，给业务层用。比如，业务层默认设置了10种动画效果，可以用此数据表示用户选择了第几个动画。
animateDuration number 0 动画总时长
animateFrames {
duration: number;
start?: number;
end?: number;
initState?: Node;
linear: boolean;
state: Node;
}[]		 动画帧。详情见 动画
animate* 其他画笔通用动画属性设置 详情见：画笔
playType number 0 - 人工播放；1 - auto自动播放；2 - animate play
playLoop boolean 循环播放
nextPlay string 下一个播放的 id or tag
iframe string 显示外部网页，类似iframe
elementId string 和节点绑定的dom元素。
一般用于临时生成，显示一段自己的dom元素。比如画布里使用echart用到的


elementRendered		 boolean 外部dom是否已经渲染。当需要重绘时，设置为false（用于第三方库辅助变量）

比如修改echarts数据后

image.png
图1

image.png
图2，子节点区域计算方式

成员函数列表

constructor构造函数

constructor(json?: any)

参数

名称 类型 是否必选 描述
json object 是。属性数据为上面的成员列表 通过一个节点或保存的json对象，创建一个新节点

init初始化函数

init()
通过节点属性，动态计算节点图标区域、文字区域、锚点等。

getIconRect计算图标区域函数

getIconRect()

getTextRect计算文字区域函数

getTextRect()

calcAnchors计算锚点函数

calcAnchors()

calcRotateAnchors计算旋转后的锚点函数

calcRotateAnchors()

getDockWatchers计算移动节点时，停靠点的参考位置函数

getDockWatchers()

emitRender通知画布刷新绘画函数

emitRender()

drawImg绘画图片函数

drawImg(ctx: CanvasRenderingContext2D)

draw绘画函数

draw(ctx: CanvasRenderingContext2D)

animate显示动画

animate(ctx: CanvasRenderingContext2D, now: number)
渲染节点动画。其中，now - 当前时间Date.now

initAnimate 动画状态初始化

initAnimate()

restore 恢复到某个状态

restore(state?: Node)

参数可选 state：动画帧的state或节点。默认为播放动画前自身状态。

主要用于动画播放过程中，停止动画后，恢复到最初状态。

  1. // 恢复到动画前
  2. node.restore()
  3. // 动画状态清0
  4. node.initAnimate()
  6. topology.render()

scale缩放

scale(scale: number, center?: Point)
根据中心点（默认为节点中心）缩放节点。

setChild设置子节点

setChild(children: any[])
传入json数组，自动new Node并push到节点children里面。
【注意】所有子节点必须包含rectInParent

手工临时给节点添加子节点：

  1. // 伪代码，下面代码默认包含递归添加
  2. const parent = new Node(...);
  3. parent.setChild([{...}]);
  4. canvas.render();

calcChildrenRect 作为父节点，计算子节点计算位置

calcChildrenRect()

calcRectByParent 作为子节点，计算在父节点计算位置

calcRectByParent(parent: Pen)
根据子节点rectInParent属性，计算实际在画布中位置

calcRectInParent 根据子节点当前画布位置，计算在父节点的位置

calcRectInParent(parent: Pen)
计算子节点的rectInParent属性

setChild 设置子节点

setChild(children: any[])
子节点json对象数组或Node数组

手工临时给节点添加子节点：

  1. // 伪代码，下面代码默认不含递归添加
  2. const parent = new Node(...);
  3. const child = new Node(...);
  4. parent.setChild([child]);
  5. canvas.render();