Class: DisplayObject

显示对象, Node、Link的父类

Hierarchy

• EventTarget

  ↳ DisplayObject

  ↳↳ Node

  ↳↳ Link

Table of contents

Constructors

• constructor

Properties

• _computedStyle
• _visible
• allwaysSerializers
• children
• classList
• className
• connectable
• data
• deep
• destroyed
• draggable
• dropAllowed
• editable
• frozen
• inLinks
• isLayer
• isLink
• isNode
• isSelected
• mouseEnabled
• name
• origin
• outLinks
• paintSelected
• painted
• parent
• pickType
• selectedStyle
• serializeable
• serializers
• showSelected
• style
• type
• z

Accessors

• bottom
• height
• left
• right
• rotation
• scaleX
• scaleY
• skewX
• skewY
• top
• userData
• visible
• width
• x
• y
• zIndex

Methods

• addChild
• addChilds
• addClass
• addEventListener
• changeParent
• clearCss
• css
• destory
• dispatchEvent
• draw
• getAABB
• getAllLinks
• getAllNodes
• getChildren
• getComputedStyle
• getLinks
• getLocalPoint
• getPoint
• getPositionNames
• getRoot
• getSegmentPoints
• getStageTransform
• getStyle
• getTransform
• getUserData
• getWorldTransform
• hasChild
• hasChildren
• hasClass
• hasListener
• hide
• hideAllChild
• isConnected
• isOutOfParent
• isVisible
• on
• pickable
• positionToLocalPoint
• querySelector
• querySelectorAll
• remove
• removeAllChild
• removeAllClass
• removeChild
• removeChilds
• removeClass
• removeEventListener
• removeFromParent
• removeUserData
• screenToLocalVec
• screenToLocalXY
• setStyles
• setUserData
• setZIndex
• setzIndex
• show
• showAllChild
• stageToLocalVec
• stageToLocalXY
• toJSON
• toLayerXY
• toScreenXY
• toStageXY
• toWorldXY
• transformPoint
• translateWith
• updateZIndex
• updatezIndex
• flatten
• getNoChildrensObjects

Constructors

constructor

new DisplayObject()

Overrides

EventTarget.constructor

Properties

_computedStyle

Readonly _computedStyle: Style

层叠样式计算后的

主题、自定义样式类、css方法设置三者叠加后的最终结果

只读，不要修改

---

_visible

_visible: boolean

---

allwaysSerializers

allwaysSerializers: string[]

总会被序列化的属性列表

---

children

Readonly children: DisplayObject[]

子节点集合

---

classList

Readonly classList: string[]

通过addClass添加的样式名称列表

---

className

Readonly className: string

---

connectable

connectable: boolean

是否可连线，仅仅编辑模式有意义

---

data

Optional data: any

为了安全考虑，防止与对象属性冲突,用户最好使用该对象 用户附加到该对象的自定义属性

Since

2.4.0

---

deep

deep: number

层级深度, Layer为0，下面第一层子节点为1，依次类推

---

destroyed

destroyed: boolean

---

draggable

draggable: boolean

是否可拖拽

---

dropAllowed

dropAllowed: boolean

是否可以作为拖拽目标

Since

2.4.0

---

editable

editable: boolean

是否可以调整角度、尺寸，仅仅编辑模式有意义

---

frozen

frozen: boolean

是否冻结（所有下级子节点）

冻结后鼠标拾取到子节点或者本节点都视为拾取了本节点

---

inLinks

inLinks: Link[]

所有以本对象为结束点的Link对象数组

---

isLayer

Optional isLayer: boolean

---

isLink

Optional isLink: boolean

是否是Link对象

---

isNode

isNode: boolean

是否是Node对象

---

isSelected

isSelected: boolean

是否被选中了

---

mouseEnabled

mouseEnabled: boolean

是否响应鼠标，为false的时候，不响应鼠标的动作

---

name

Optional name: string

名称，可以在编辑时指定，运行时通过名称获取对象的引用

---

origin

origin: number[]

本地坐标系的原点，采用单位化坐标， 默认为[0,0], 父对象的中心

---

outLinks

outLinks: Link[]

所有以本本对为开始点的Link对象数组

---

paintSelected

Optional paintSelected: Function

---

painted

painted: boolean

是否绘制到了最后一帧：是否在当前最新的画布上

---

parent

Optional parent: DisplayObject

上级对象

---

pickType

pickType: PickType

鼠标拾取方式（节点内容，还是整个节点矩形区域)

---

selectedStyle

Optional selectedStyle: Style

选中时的样式，如果不设置将使用默认的

---

serializeable

serializeable: boolean

是否可序列化，默认true 如果为false，序列化时将跳过该对象

---

serializers

serializers: string[]

序列化属性列表

---

showSelected

showSelected: boolean

是否显示选中的效果，默认显示

---

style

style: Style

样式

---

type

Optional type: string

类型，自定义类型

可用于自定义节点，区分节点类型

比用data属性更方便一点

Since

2.4.0

---

z

z: number

Accessors

bottom

get bottom(): number

Since

2.4.0

Returns

number

set bottom(v): void

Parameters

Name	Type
v	number

Returns

void

---

height

get height(): number

Returns

number

set height(v): void

Parameters

Name	Type
v	number

Returns

void

---

left

get left(): number

Since

2.4.0

Returns

number

set left(v): void

Parameters

Name	Type
v	number

Returns

void

---

right

get right(): number

Since

2.4.0

Returns

number

set right(v): void

Parameters

Name	Type
v	number

Returns

void

---

rotation

get rotation(): any

Returns

any

set rotation(v): void

Parameters

Name	Type
v	any

Returns

void

---

scaleX

get scaleX(): number

Returns

number

set scaleX(v): void

Parameters

Name	Type
v	number

Returns

void

---

scaleY

get scaleY(): number

Returns

number

set scaleY(v): void

Parameters

Name	Type
v	number

Returns

void

---

skewX

get skewX(): number

Returns

number

set skewX(v): void

Parameters

Name	Type
v	number

Returns

void

---

skewY

get skewY(): number

Returns

number

set skewY(v): void

Parameters

Name	Type
v	number

Returns

void

---

top

get top(): number

Since

2.4.0

Returns

number

set top(v): void

Parameters

Name	Type
v	number

Returns

void

---

userData

get userData(): any

Deprecated

已过时，请使用更简短的：data 属性替代

Returns

any

set userData(v): void

Deprecated

已过时，请使用更简短的：data 属性替代

Parameters

Name	Type
v	any

Returns

void

---

visible

get visible(): boolean

Returns

boolean

set visible(v): void

Parameters

Name	Type
v	boolean

Returns

void

---

width

get width(): number

Returns

number

set width(v): void

Parameters

Name	Type
v	number

Returns

void

---

x

get x(): number

Returns

number

set x(v): void

Parameters

Name	Type
v	number

Returns

void

---

y

get y(): number

Returns

number

set y(v): void

Parameters

Name	Type
v	number

Returns

void

---

zIndex

get zIndex(): number

Returns

number

set zIndex(v): void

Parameters

Name	Type
v	number

Returns

void

Methods

addChild

addChild(child): DisplayObject

增加子对象

Parameters

Name	Type
child	DisplayObject

Returns

DisplayObject

---

addChilds

addChilds(childs): void

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

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

Parameters

Name	Type
childs	DisplayObject[]

Returns

void

---

addClass

addClass(styleName): void

增加一个样式

obj.addClass('.focus');

Parameters

Name	Type
styleName	string

Returns

void

---

addEventListener

addEventListener(type, callback): void

增加事件监听

Parameters

Name	Type	Description
type	string	事件类型
callback	Function

Returns

void

Inherited from

EventTarget.addEventListener

---

changeParent

Abstract changeParent(newParent): any

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

Parameters

Name	Type
newParent	DisplayObject

Returns

any

---

clearCss

clearCss(): void

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

Returns

void

---

css

css(styleOption, value?): DisplayObject

背景和边框的设置语法参考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

DisplayObject

---

destory

destory(): void

销毁，释放相关的资源引用,一旦销毁，对象不能再被访问，访问就会报错。

注意：销毁后，所有事件回调、动画、定时器等均不能再访问，否则会报错。

Returns

void

---

dispatchEvent

dispatchEvent(event): void

分发事件

Parameters

Name	Type
event	any

Returns

void

Inherited from

EventTarget.dispatchEvent

---

draw

Abstract draw(ctx): any

绘制具体内容

Parameters

Name	Type
ctx	CanvasRenderingContext2D

Returns

any

---

getAABB

getAABB(recursive?): Rectangle

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

Parameters

Name	Type	Description
recursive?	boolean	是否将子节点包含在内

Returns

Rectangle

---

getAllLinks

getAllLinks(): DisplayObject[]

递归式 获取所有连线对象

Returns

DisplayObject[]

所有连线对象

---

getAllNodes

getAllNodes(): DisplayObject[]

递归式 获取所有节点对象

Returns

DisplayObject[]

所有节点对象

---

getChildren

getChildren(): DisplayObject[]

获取所有子对象

Returns

DisplayObject[]

---

getComputedStyle

getComputedStyle(obj): Style

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

Parameters

Name	Type
obj	DisplayObject

Returns

Style

---

getLinks

getLinks(): Link[]

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

Returns

Link[]

---

getLocalPoint

getLocalPoint(t, segIndex?): PointLike

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

Parameters

Name	Type
t	number
segIndex?	number

Returns

PointLike

---

getPoint

getPoint(t, segIndex?): PointLike

获取对象上某一点

Parameters

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

Returns

PointLike

---

getPositionNames

getPositionNames(): string[]

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

Returns

string[]

---

getRoot

getRoot(): DisplayObject

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

Returns

DisplayObject

---

getSegmentPoints

Abstract getSegmentPoints(): PointLike[]

Returns

PointLike[]

---

getStageTransform

getStageTransform(): any

Returns

any

---

getStyle

getStyle(name): any

读取某个样式的值

Parameters

Name	Type
name	string

Returns

any

---

getTransform

getTransform(): Transform

Returns

Transform

---

getUserData

getUserData(): any

读取用户自定义的数据

Returns

any

---

getWorldTransform

getWorldTransform(): any

Returns

any

---

hasChild

hasChild(child): boolean

是否拥有子对象

Parameters

Name	Type
child	DisplayObject

Returns

boolean

---

hasChildren

hasChildren(): boolean

Returns

boolean

---

hasClass

hasClass(styleName): boolean

检测是否拥有某个样式类

node.hasClass('.focus');

Since

2.4.0

Parameters

Name	Type
styleName	string

Returns

boolean

---

hasListener

hasListener(type): boolean

是否有该类型的监听

Parameters

Name	Type
type	string

Returns

boolean

Inherited from

EventTarget.hasListener

---

hide

hide(): DisplayObject

隐藏

Returns

DisplayObject

---

hideAllChild

hideAllChild(): void

隐藏所有下级节点

Returns

void

---

isConnected

isConnected(): boolean

是否被任意Link连接到

Since

2.4.0

Returns

boolean

---

isOutOfParent

isOutOfParent(): boolean

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

Returns

boolean

---

isVisible

isVisible(): boolean

判断是否可见

Returns

boolean

---

on

on(type, callback): void

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

Parameters

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

Returns

void

Inherited from

EventTarget.on

---

pickable

pickable(): boolean

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

pickable() {
   return this.mouseEnabled;
}

Returns

boolean

---

positionToLocalPoint

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

得到对象内部位置坐标（参照左上角为-this.widht/2，-this.height/2, 0, 0 为中心）

Parameters

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

Returns

PointLike

---

querySelector

querySelector(querySelector): DisplayObject

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

Parameters

Name	Type
querySelector	string | Function

Returns

DisplayObject

---

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

DisplayObject[]

---

remove

remove(): DisplayObject

removeFromParent的简写。

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

Returns

DisplayObject

---

removeAllChild

removeAllChild(): DisplayObject

移除所有子对象

Returns

DisplayObject

---

removeAllClass

removeAllClass(): void

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

obj.removeAllClass();

Returns

void

---

removeChild

removeChild(child): DisplayObject

移除一个子对象

Parameters

Name	Type
child	DisplayObject

Returns

DisplayObject

---

removeChilds

removeChilds(childs): DisplayObject

移除多个子对象

Parameters

Name	Type
childs	DisplayObject[]

Returns

DisplayObject

---

removeClass

removeClass(styleName): void

移除一个样式

obj.removeClass('.focus');

Parameters

Name	Type
styleName	string

Returns

void

---

removeEventListener

removeEventListener(type, callback): any

移除一个事件监听

Parameters

Name	Type
type	string
callback	Function

Returns

any

Inherited from

EventTarget.removeEventListener

---

removeFromParent

removeFromParent(): DisplayObject

从父容器中移除

Returns

DisplayObject

---

removeUserData

removeUserData(): DisplayObject

移除用户自定义的数据

Deprecated

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

Returns

DisplayObject

---

screenToLocalVec

screenToLocalVec(vec): Vec2

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

Parameters

Name	Type
vec	Vec2

Returns

Vec2

---

screenToLocalXY

screenToLocalXY(x, y): any

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

Parameters

Name	Type
x	number
y	number

Returns

any

---

setStyles

setStyles(styleOpt, value?): DisplayObject

完全等价于css 方法

Parameters

Name	Type
styleOpt	StyleOptions
value?	any

Returns

DisplayObject

---

setUserData

setUserData(data): DisplayObject

设置用户自定义数据

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

Deprecated

已过时，直接访问 data 即可

Parameters

Name	Type
data	any

Returns

DisplayObject

---

setZIndex

setZIndex(index): void

设置zIndex

Parameters

Name	Type
index	number

Returns

void

---

setzIndex

setzIndex(index): void

请使用 setZIndex(Z大写)

Deprecated

Parameters

Name	Type
index	number

Returns

void

---

show

show(): DisplayObject

显示

Returns

DisplayObject

---

showAllChild

showAllChild(): void

显示所有下级节点

Returns

void

---

stageToLocalVec

stageToLocalVec(vec): Vec2

Deprecated

v2.5.0 后使用 screenToLocalVec 替代

Parameters

Name	Type
vec	Vec2

Returns

Vec2

---

stageToLocalXY

stageToLocalXY(x, y): any

Deprecated

v2.5.0 后使用 screenToLocalXY 替代

Parameters

Name	Type
x	number
y	number

Returns

any

---

toJSON

toJSON(indexInfo?): SerializedDisplayObject

Parameters

Name	Type
indexInfo?	any

Returns

SerializedDisplayObject

---

toLayerXY

toLayerXY(x, y): PointLike

Deprecated

v2.5.0 后使用 toWorldXY 替代

Parameters

Name	Type
x	number
y	number

Returns

PointLike

---

toScreenXY

toScreenXY(x, y): any

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

cavnas的左上角为0,0

Since

2.5.0

Parameters

Name	Type
x	number
y	number

Returns

any

---

toStageXY

toStageXY(x, y): any

Deprecated

v2.5.0 后使用 toSreenXY 替代

Parameters

Name	Type
x	number
y	number

Returns

any

---

toWorldXY

toWorldXY(x, y): PointLike

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

Since

2.5.0

Parameters

Name	Type
x	number
y	number

Returns

PointLike

---

transformPoint

transformPoint(p): Object

Parameters

Name	Type
p	PointLike

Returns

Object

Name	Type
x	number
y	number

---

translateWith

Abstract translateWith(dx, dy): any

Parameters

Name	Type
dx	number
dy	number

Returns

any

---

updateZIndex

updateZIndex(): void

Returns

void

---

updatezIndex

updatezIndex(): void

请使用 upateZIndex(Z大写)

Deprecated

Returns

void

---

flatten

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

Parameters

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

Returns

DisplayObject[]

---

getNoChildrensObjects

Static getNoChildrensObjects(arr): DisplayObject[]

Parameters

Name	Type
arr	DisplayObject[]

Returns

DisplayObject[]