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


// es6, npm lib
import { Node } from 'topology-core/models/node';

// es5, bundle.js
Le5leTopology.Node


成员变量列表

继承于画笔的成员变量这里省略,请参考画笔

仅仅标*字段和rect里面的width、height为必须,其他字段可按需选择


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

名称

类型

默认值

描述

name*

string


节点名称。添加节点用。必须是有效的内置节点名,或有效的自定义(注册)节点名称

is3D

boolean

false

是否是3D模型

z

number


z坐标

zRotate

number


z轴旋转角度°

borderRadius

number

0

圆角

bkType

number

0

背景色类型

0 - 纯色背景,配合fillStyle属性生效。

1 - 线性渐变,配合设置下面属性:  

     gradientFromColor

     gradientToColor

     gradientAngle

2 - 径向渐变配合设置下面属性    

     gradientFromColor       

     gradientToColor

     gradientRadius

gradientFromColor

string


渐变起始颜色

gradientToColor

string


渐变终点颜色

gradientAngle

number


线性渐变角度方向

gradientRadius

number


径向渐变半径

icon

string


字体图标Unicode编码字符串

格式:'\ue64d'


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


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

iconFamily

string


字体图标字体名称

iconSize

number


字体图标大小

iconColor

string


字体图标颜色

image

string


图片图标url,优先于字体图标显示。

imgNaturalWidth

number


图片图标原始宽,自动计算

imgNaturalHeight

number


图片图标原始高,自动计算

imageWidth

number


图片图标显示宽

imageHeight

number


图片图标显示高

imageRatio

boolean

true

是否保存图片长宽比

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[]


锚点。用于线的连接点

rotatedAnchors

Point[]


旋转后的锚点

dockWatchers

Point[]


移动节点时,停靠点的参考位置

children

Node[]


子节点

childStand

boolean


适用于0.1.x版本。子节点是否能被独立编辑

standboolean


适用于0.1.x版本。作为子节点是否能被独立编辑

parentId

string


父节点ID

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

number

0

动画辅助数据,给业务层用。比如,业务层默认设置了10种动画效果,可以用此数据表示用户选择了第几个动画。

animateDuration

number

0

动画总时长

animateFrames

{

    duration: number;

    start?: number;

    end?: number;

    initState?: Node;

    linear: boolean;

    state: Node;

  }[]


动画帧。详情见 动画

elementId

string


和节点绑定的dom元素。

一般用于临时生成,显示一段自己的dom元素。比如画布里使用echart用到的


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)


clearImg清除图片缓存,准备渲染新图片

clearImg()

更换图片后,可调用

animate显示动画

animate(ctx: CanvasRenderingContext2Dnow: number)

渲染节点动画。其中,now - 当前时间Date.now


scale缩放

scale(scale: numbercenter?: Point)

根据中心点(默认为节点中心)缩放节点。


setChild设置子节点

setChild(children: any[])

传入json数组,自动new Node并push到节点children里面。

【注意】所有子节点必须包含rectInParent


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

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


calcChildRect(作为子节点)根据父节点计算位置

calcChildRect(parent: Node)

【注意】所有子节点必须包含rectInParent


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

// 伪代码,下面代码默认不含递归添加
const parent = new Node(...);
const child = new Node(...);
child.calcChildRect(parent);
child.init();
parent.children.push(child);
canvas.render();