Class: Layer <a class="header-anchor" href="#class-layer" aria-label="Permalink to &quot;Class: Layer&quot;">​

Overrides

Node.addChild

addChilds

addChilds(childs): void

一次性增加多个对象, 比单个增加速度快多，数量越多越明显！

但是：互为子节点、重复添加的情形需要开发者来确保避免。

Parameters

Name	Type
`childs`	`any`

Returns

void

Overrides

Node.addChilds

addClass

addClass(styleName): void

增加一个样式

obj.addClass('.focus');

Parameters

Name	Type
`styleName`	`string`

Returns

void

Inherited from

Node.addClass

addEventListener

addEventListener(type, callback): void

增加事件监听

Parameters

Name	Type	Description
`type`	`string`	事件类型
`callback`	`Function`

Returns

void

Inherited from

Node.addEventListener

alignOriginToLink

alignOriginToLink(position, segIndex?, t?, originOffset?): void

设置附着在Link上的位置，只有父节点是Link时有效

例如：

// 将节点的 center 位置 始终对齐父对象（Link的时候）上 第1条线段的中心(0.5), 线段当前方向偏移2像素的距离
node.alignOriginToLink('center', 0, 0.5, 2);

Parameters

Name	Type	Description
`position`	`RectPosition`	自身位置
`segIndex?`	`number`	Link上线段索引
`t?`	`number`	Link上的位置（百分比)
`originOffset?`	`number`	偏移量（沿着线段当前方向）

Returns

void

Inherited from

Node.alignOriginToLink

alignOriginToNode

alignOriginToNode(position, parentPosition?): void

将某一个位置对齐到父对象(父对象为Node的时候) 的某个位置上

Parameters

Name	Type	Default value	Description
`position`	`RectPosition`	`undefined`
`parentPosition`	`RectPosition`	`'center'`	默认为'center'

Returns

void

Inherited from

Node.alignOriginToNode

centerBy

centerBy(obj?): void

将指定对象的中心放到画布中央

Deprecated

v2.5.0 已过时

Parameters

Name	Type
`obj?`	`DisplayObject` \| `DisplayObject`[]

Returns

void

changeParent

changeParent(newParent): Layer

修改父对象但保持屏幕坐标不变

Parameters

Name	Type
`newParent`	`DisplayObject`

Returns

Inherited from

Node.changeParent

clearCss

clearCss(): void

清除通过css或setStyles定义的所有样式

Returns

void

Inherited from

Node.clearCss

css

css(styleOption, value?): Layer

背景和边框的设置语法参考css样式, 图形绘制的语法使用cavnas属性设置，如下:

node.css({
   border: 'solid 1px gray',
   borderRadius: 5,
   font: 'bold 11px arial',
   color: 'gray',
   textPosition: 'center',
   textAlign: 'center',
   textBaseline: 'middle',
});

Parameters

Name	Type
`styleOption`	`string` \| `StyleOptions`
`value?`	`any`

Returns

Inherited from

Node.css

destory

destory(): void

销毁

Returns

void

Overrides

Node.destory

dispatchEvent

dispatchEvent(event): void

分发事件

Parameters

Name	Type
`event`	`any`

Returns

void

Inherited from

Node.dispatchEvent

draw

draw(ctx): void

Parameters

Name	Type
`ctx`	`any`

Returns

void

Overrides

Node.draw

drawShape

drawShape(ctx): void

Parameters

Name	Type
`ctx`	`any`

Returns

void

Inherited from

Node.drawShape

endLoopRender

endLoopRender(): void

停止渲染循环

Since

2.4.0

Returns

void

find

find(name, value, recursive?): DisplayObject[]

已过时，请使用：querySelectorAll()替代根据属性来查找Layer中的对象

例如：layer.find('text', 'node_3'); 会返回对象的text属性是 'node_3'的所有对象

例如：layer.find('isNode', true); 会返回所有Node对象

例如：layer.find('isLink', true); 会返回所有Link对象

Deprecate

Parameters

Name	Type	Default value	Description
`name`	`string`	`undefined`	属性名称
`value`	`any`	`undefined`	属性值
`recursive`	`boolean`	`false`	是否递归查找下级子节点

Returns

forceUpdate

forceUpdate(): void

Returns

void

getAABB

getAABB(): Rectangle

获取对象在Layer中的aabb包围盒

Returns

Overrides

Node.getAABB

getAllLinks

getAllLinks(): DisplayObject[]

递归式获取所有连线对象

Returns

所有连线对象

Inherited from

Node.getAllLinks

getAllNodes

getAllNodes(): DisplayObject[]

递归式获取所有节点对象

Returns

所有节点对象

Inherited from

Node.getAllNodes

getChildren

getChildren(): DisplayObject[]

获取所有子对象

Returns

Inherited from

Node.getChildren

getComputedStyle

getComputedStyle(obj): Style

获取指定对象样式层叠计算后的样式(只读，不要修改返回的对象)

Parameters

Name	Type
`obj`	`DisplayObject`

Returns

Style

Inherited from

Node.getComputedStyle

getExportAABB

getExportAABB(): Rectangle

Returns

getImage

getImage(callback?): Promise<HTMLImageElement>

获取图片，注意图片的加载是异步

图片如果不存在或者加载失败image为null

node.getImage().then(function(image){
if(image == null){
   return;
}
console.log(image);
})

Parameters

Name	Type
`callback?`	`Function`

Returns

Promise<HTMLImageElement>

Inherited from

Node.getImage

getLinkChildren

getLinkChildren(recursive): any[]

Parameters

Name	Type
`recursive`	`any`

Returns

any[]

Inherited from

Node.getLinkChildren

getLinks

getLinks(): Link[]

获取所有连接到本对象的Link

Returns

Link[]

Inherited from

Node.getLinks

getLocalPoint

getLocalPoint(t, segIndex?): PointLike

获取对象边框或者线上某一点(本地坐标系)

Parameters

Name	Type
`t`	`number`
`segIndex?`	`number`

Returns

Inherited from

Node.getLocalPoint

getPoint

getPoint(t, segIndex?): PointLike

获取对象上某一点

Parameters

Name	Type	Description
`t`	`number`	[0-1] 在线段上的比例
`segIndex?`	`number`	线段索引(Node是矩形，有4条线段，索引：[0-3]）可选项

Returns

Inherited from

Node.getPoint

getPoints

getPoints(): { x: number = 0; y: number = 0 }[]

Returns

{ x: number = 0; y: number = 0 }[]

getPositionNames

getPositionNames(): string[]

获取本对象上定义的所有位置名称

Returns

string[]

Inherited from

Node.getPositionNames

getPositionNormal

getPositionNormal(name): number[]

Parameters

Name	Type
`name`	`string`

Returns

number[]

Inherited from

Node.getPositionNormal

getRect

getRect(): Rectangle

Returns

Inherited from

Node.getRect

getRoot

getRoot(): Layer

获取'root'对象, 沿着parent一直向上追溯

Returns

Inherited from

Node.getRoot

getSegmentPoints

getSegmentPoints(): PointLike[]

Returns

PointLike[]

Inherited from

Node.getSegmentPoints

getStageTransform

getStageTransform(): any

Returns

any

Inherited from

Node.getStageTransform

getStyle

getStyle(name): any

读取某个样式的值

Parameters

Name	Type
`name`	`string`

Returns

any

Inherited from

Node.getStyle

getTransform

getTransform(): Transform

Returns

Transform

Inherited from

Node.getTransform

getUserData

getUserData(): any

读取用户自定义的数据

Returns

any

Inherited from

Node.getUserData

getWorldTransform

getWorldTransform(): any

Returns

any

Inherited from

Node.getWorldTransform

hasChild

hasChild(child): boolean

是否拥有子对象

Parameters

Name	Type
`child`	`DisplayObject`

Returns

boolean

Inherited from

Node.hasChild

hasChildren

hasChildren(): boolean

Returns

boolean

Inherited from

Node.hasChildren

hasClass

hasClass(styleName): boolean

检测是否拥有某个样式类

node.hasClass('.focus');

Since

2.4.0

Parameters

Name	Type
`styleName`	`string`

Returns

boolean

Inherited from

Node.hasClass

hasListener

hasListener(type): boolean

是否有该类型的监听

Parameters

Name	Type
`type`	`string`

Returns

boolean

Inherited from

Node.hasListener

hide

hide(): Layer

隐藏

Returns

Overrides

Node.hide

hideAllChild

hideAllChild(): void

隐藏所有下级节点

Returns

void

Inherited from

Node.hideAllChild

hideAxis

hideAxis(): void

隐藏坐标轴

Returns

void

isConnected

isConnected(): boolean

是否被任意Link连接到

Since

2.4.0

Returns

boolean

Inherited from

Node.isConnected

isOutOfParent

isOutOfParent(): boolean

是否超出了父节点的矩形区域

Returns

boolean

Inherited from

Node.isOutOfParent

isVisible

isVisible(): boolean

判断是否可见

Returns

boolean

Inherited from

Node.isVisible

loopRender

loopRender(frames?): void

开启渲染循环, 定时刷新画面（最高60帧）

如果不开启渲染循环, 有鼠标动作和动画时才会重绘画面

Parameters

Name	Type	Default value
`frames`	`number`	`60`

Returns

void

nearest

nearest(x, y): any

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

any

Inherited from

Node.nearest

on

on(type, callback): void

增加监听事件, 功能完全等同于addEventListener，一种简写

Parameters

Name	Type	Description
`type`	`string`	事件类型
`callback`	`Function`	事件处理函数

Returns

void

Inherited from

Node.on

openJson

openJson(jsonOrString): Promise<SerializedJson>

清空当前画布并加载json内容

// 情形1
layer.openJson(json).then(()=>{
console.log('已经打开，并且所有资源加载完成');
});

// 情形2, 同上，使用js的新语法 await
await layer.openJson(json);
console.log('已经打开，并且所有资源加载完成');
//... 继续其他操作

Parameters

Name	Type
`jsonOrString`	`string` \| `SerializedJson`

Returns

Promise<SerializedJson>

Promise

openJsonAndWait

openJsonAndWait(jsonOrString): Promise<SerializedJson>

功能与openJson完全一致

Deprecated

请使用 openJson

Parameters

Name	Type
`jsonOrString`	`string` \| `SerializedJson`

Returns

Promise<SerializedJson>

Promise

pickUpChild

pickUpChild(): DisplayObject

Returns

DisplayObject

pickable

pickable(): boolean

是否可被拾取到，默认返回：mouseEnabled 属性

pickable() {
   return this.mouseEnabled;
}

Returns

boolean

Inherited from

Node.pickable

positionToLocalPoint

positionToLocalPoint(name, x?, y?): PointLike

得到对象内部位置坐标（参照左上角为0，0）

Parameters

Name	Type	Description
`name`	`string`	位置名称
`x?`	`number`	name为nearest时需要
`y?`	`number`	name为nearest时需要

Returns

Node.positionToLocalPoint

Inherited from

querySelector

querySelector(querySelector): DisplayObject

功能类似querySelectorAll,但只返回第一个满足条件的对象或者null

Parameters

Name	Type
`querySelector`	`string` \| `Function`

Returns

DisplayObject

Inherited from

Node.querySelector

querySelectorAll

querySelectorAll(querySelector?): DisplayObject[]

对象选择器

语法兼容DOM的Selector API标准（并不支持标准里的所有语法）

支持的语法形式如下：


//obj.querySelector(类名称)， 例如:
let circleNodes = layer.querySelectorAll('CircleNode');
let links = layer.querySelector('Link');

//obj.querySelector(样式名称)，例如:
let serverNodes = layer.querySelectorAll('.server');
let activedObjs = layer.querySelectorAll('.active');

let arr = layer.querySelectorAll((e)=>e.x > 20 && e.y < 100);

//obj.querySelector(ID);
let obj = layer.querySelectorAll('#123')[0];

//obj.querySelector([属性名称=""]); 
let arr = layer.querySelectorAll('[text="abc"]');
let arr2 = layer.querySelectorAll('[draggable=true]');

// obj.querySelector(类名称|样式名称[属性名称=""]); 
let obj = layer.querySelector('TextNode[x<=-200]');
let obj2 = layer.querySelector('.server[text="X86"]');

Parameters

Name	Type
`querySelector?`	`string` \| `Function`

Returns

Inherited from

Node.querySelectorAll

remove

remove(): Layer

removeFromParent的简写。

推荐使用语义更明确的：removeFromParent()来替代。

Returns

Inherited from

Node.remove

removeAllChild

removeAllChild(): Layer

移除所有子对象

Returns

Inherited from

Node.removeAllChild

removeAllClass

removeAllClass(): void

移除所有通过addClass添加的样式

obj.removeAllClass();

Returns

void

Inherited from

Node.removeAllClass

removeChild

removeChild(child): Layer

移除一个子对象

Parameters

Name	Type
`child`	`DisplayObject`

Returns

Inherited from

Node.removeChild

removeChilds

removeChilds(childs): Layer

移除多个子对象

Parameters

Name	Type
`childs`	`DisplayObject`[]

Returns

Inherited from

Node.removeChilds

removeClass

removeClass(styleName): void

移除一个样式

obj.removeClass('.focus');

Parameters

Name	Type
`styleName`	`string`

Returns

void

Inherited from

Node.removeClass

removeEventListener

removeEventListener(type, callback): any

移除一个事件监听

Parameters

Name	Type
`type`	`string`
`callback`	`Function`

Returns

any

Inherited from

Node.removeEventListener

removeFromParent

removeFromParent(): Layer

从父容器中移除

Returns

Inherited from

Node.removeFromParent

removeUserData

removeUserData(): Layer

移除用户自定义的数据

Deprecated

已过时，直接设置 data 为空对象或者null 即可

Returns

Inherited from

Node.removeUserData

resize

resize(width, height): Layer

设置尺寸

Parameters

Name	Type	Description
`width`	`number`	宽度
`height`	`number`	高度

Returns

Inherited from

Node.resize

resizeTo

resizeTo(width, height): Layer

Parameters

Name	Type
`width`	`number`
`height`	`number`

Returns

Inherited from

Node.resizeTo

resizeToFitImage

resizeToFitImage(): void

调整尺寸到图片的实际大小

Returns

void

Inherited from

Node.resizeToFitImage

resizeWith

resizeWith(w, h): Layer

原有尺寸基础上增加

Parameters

Name	Type
`w`	`number`
`h`	`number`

Returns

Inherited from

Node.resizeWith

rotate

rotate(angle): Layer

旋转

Parameters

Name	Type	Description
`angle`	`number`	旋转角度（弧度）

Returns

Inherited from

Node.rotate

rotateTo

rotateTo(angle): Layer

旋转

Parameters

Name	Type	Description
`angle`	`number`	旋转角度（弧度）

Returns

Inherited from

Node.rotateTo

rotateWith

rotateWith(angle): Layer

旋转-增量性

Parameters

Name	Type	Description
`angle`	`number`	旋转角度（弧度）

Returns

Inherited from

Node.rotateWith

scale

scale(x, y): Layer

缩放

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

Inherited from

Node.scale

scaleBy

scaleBy(x, y): Layer

Parameters

Name	Type
`x`	`any`
`y`	`any`

Returns

Inherited from

Node.scaleBy

scaleTo

scaleTo(x, y): Layer

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

Inherited from

Node.scaleTo

screenToLocalVec

screenToLocalVec(vec): Vec2

将一个屏幕坐标系下的向量转换到本地坐标系 @@since 2.5.0

Parameters

Name	Type
`vec`	`Vec2`

Returns

Vec2

Inherited from

Node.screenToLocalVec

screenToLocalXY

screenToLocalXY(x, y): any

将一个屏幕坐标转换到本地坐标系

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

any

Inherited from

Node.screenToLocalXY

setBackground

setBackground(background, backgroundSize): void

该方法已过时，未来版本不再支持, 请使用css方法

Deprecated

Parameters

Name	Type
`background`	`any`
`backgroundSize`	`any`

Returns

void

setImage

setImage(imgObj, fitSize?): Layer

设置图片

Parameters

Name	Type	Default value	Description
`imgObj`	`string` \| `HTMLImageElement` \| `HTMLCanvasElement`	`undefined`	图片对象(Image)、图片路径、或者Canvas
`fitSize`	`boolean`	`false`	-

Returns

Inherited from

Node.setImage

setOrigin

setOrigin(lineSegmentIndex, t): Layer

设置坐标原点

已过时，未来可能删除，请使用 setXYOnLink(lineSegmentIndex, t) 替代只有Node节点才有setXYOnLink() 方法

Deprecated

已过时，

Parameters

Name	Type
`lineSegmentIndex`	`number`
`t`	`number`

Returns

Inherited from

Node.setOrigin

setOriginToPosition

setOriginToPosition(name): Layer

将坐标原点设置到父的某个位置上

Parameters

Name	Type
`name`	`string`

Returns

Inherited from

Node.setOriginToPosition

setRotateCenter

setRotateCenter(position): Layer

Parameters

Name	Type
`position`	`RectPosition`

Returns

Inherited from

Node.setRotateCenter

setShape

setShape(shape): void

设置节点的形状

Parameters

Name	Type
`shape`	`Shape`

Returns

void

Inherited from

Node.setShape

setStyles

setStyles(styleOpt, value?): Layer

完全等价于css 方法

Parameters

Name	Type
`styleOpt`	`StyleOptions`
`value?`	`any`

Returns

Inherited from

Node.setStyles

setText

setText(v): void

Parameters

Name	Type
`v`	`string`

Returns

void

Inherited from

Node.setText

setUserData

setUserData(data): Layer

设置用户自定义数据

直接在节点对象上增加属性不是稳妥的方法，若要向节点增加额外的属性，应该调用此方法

Deprecated

已过时，直接访问 data 即可

Parameters

Name	Type
`data`	`any`

Returns

Inherited from

Node.setUserData

setXY

setXY(x, y): Layer

设置坐标， translate的简写

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

Inherited from

Node.setXY

setXYOnLink

setXYOnLink(lineSegmentIndex, t): Layer

将节点定位到连线的某个位置上，该位置随连线变化而变,

Since

2.4.0

Parameters

Name	Type
`lineSegmentIndex`	`number`
`t`	`number`

Returns

Inherited from

Node.setXYOnLink

setzIndex

setzIndex(index): void

请使用 setZIndex(Z大写)

Deprecated

Parameters

Name	Type
`index`	`number`

Returns

void

Inherited from

Node.setzIndex

show

show(): Layer

显示

Returns

Overrides

Node.show

showAllChild

showAllChild(): void

显示所有下级节点

Returns

void

Inherited from

Node.showAllChild

showAxis

showAxis(): void

显示坐标轴

Returns

void

skew

skew(skewX, skewY): Layer

错切

Parameters

Name	Type
`skewX`	`number`
`skewY`	`number`

Returns

SerializedDisplayObject

Inherited from

Node.skew

stageToLocalVec

stageToLocalVec(vec): Vec2

Deprecated

v2.5.0 后使用 screenToLocalVec 替代

Parameters

Name	Type
`vec`	`Vec2`

Returns

Vec2

Inherited from

Node.stageToLocalVec

stageToLocalXY

stageToLocalXY(x, y): any

Deprecated

v2.5.0 后使用 screenToLocalXY 替代

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

any

Inherited from

Node.stageToLocalXY

toFileJson

toFileJson(opt?): string

生成json, 含自定义样式

// 可以附带参数, 参数都是可选
toFileJson({
  info: {author:"张三", date:"2024-02", "desc":"XXX车间装配图", ....},
  script: `function(stage, layer){....}`,
  imageToBase64: true //是否将图片以base64的形式内联到json
});

Parameters

Name	Type
`opt?`	`boolean` \| `ToJsonOption`

Returns

string

toJSON

toJSON(indexInfo?): SerializedDisplayObject

Parameters

Name	Type
`indexInfo?`	`any`

Returns

Inherited from

Node.toJSON

toLayerRect

toLayerRect(rect): Rectangle

Parameters

Name	Type
`rect`	`Rectangle`

Returns

toLayerXY

toLayerXY(x, y): PointLike

Deprecated

v2.5.0 后使用 toWorldXY 替代

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

Inherited from

Node.toLayerXY

toScreenXY

toScreenXY(x, y): any

将一个本地坐标转到屏幕(实际是canvas)坐标系

cavnas的左上角为0,0

Since

2.5.0

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

any

Inherited from

Node.toScreenXY

toStageRect

toStageRect(aabbInLayer): Rectangle

Parameters

Name	Type
`aabbInLayer`	`Rectangle`

Returns

toStageXY

toStageXY(x, y): any

Deprecated

v2.5.0 后使用 toSreenXY 替代

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

any

Inherited from

Node.toStageXY

toWorldXY

toWorldXY(x, y): PointLike

将一个本地坐标转到世界坐标系

Since

2.5.0

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

Inherited from

Node.toWorldXY

transformPoint

transformPoint(p): Object

Parameters

Name	Type
`p`	`PointLike`

Returns

Object

Name	Type
`x`	`number`
`y`	`number`

Inherited from

Node.transformPoint

translate

translate(x, y): Layer

平移对象，与setXY()完全等价

只是从图形的语义上平移更接近本质：有相对性的意识

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

Inherited from

Node.translate

translatePositionTo

translatePositionTo(positionName, x, y): void

平移对象上的的某个位置到指定位置(x,y),整个对象随之移动

// 平移节点的右上角到 100,100 处
node.translatePositionTo('rt', 100, 100);

Parameters

Name	Type
`positionName`	`string`
`x`	`number`
`y`	`number`

Returns

void

Inherited from

Node.translatePositionTo

translateTo

translateTo(x, y): Layer

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

Inherited from

Node.translateTo

translateWith

translateWith(x, y): Layer

增量平移对象, 在对象原有的坐标基础上，增加偏移(dx,dy)。相当于: x += dx; y += dy。

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

Overrides

Node.translateWith

update

update(): boolean

请求刷新

Returns

boolean

updateZIndex

updateZIndex(): void

Returns

void

Inherited from

Node.updateZIndex

updatezIndex

updatezIndex(): void

请使用 upateZIndex(Z大写)

Deprecated

Returns

void

Inherited from

Node.updatezIndex

zoomIn

zoomIn(): Layer

放大到1.25

Returns

Inherited from

Node.zoomIn

zoomOut

zoomOut(): Layer

缩小到0.8

Returns

Inherited from

Node.zoomOut

flatten

Static flatten(arr, cond?, breadthFirst?): DisplayObject[]

Parameters

Name	Type
`arr`	`DisplayObject`[]
`cond?`	`Function`
`breadthFirst?`	`boolean`

Returns

Inherited from

Node.flatten

getNoChildrensObjects

Static getNoChildrensObjects(arr): DisplayObject[]

Parameters

Name	Type
`arr`	`DisplayObject`[]

Returns