Class: DisplayObject
显示对象, Node、Link的父类
Hierarchy
Table of contents
Constructors
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
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
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
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
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
destory
destory(): void
销毁,释放相关的资源引用,一旦销毁,对象不能再被访问,访问就会报错。
注意:销毁后,所有事件回调、动画、定时器等均不能再访问,否则会报错。
Returns
void
dispatchEvent
dispatchEvent(event
): void
分发事件
Parameters
Name | Type |
---|---|
event | any |
Returns
void
Inherited from
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
getAllLinks
getAllLinks(): DisplayObject
[]
递归式 获取所有连线对象
Returns
所有连线对象
getAllNodes
getAllNodes(): DisplayObject
[]
递归式 获取所有节点对象
Returns
所有节点对象
getChildren
getChildren(): DisplayObject
[]
获取所有子对象
Returns
getComputedStyle
getComputedStyle(obj
): Style
获取指定对象样式层叠计算后的样式(只读,不要修改返回的对象)
Parameters
Name | Type |
---|---|
obj | DisplayObject |
Returns
getLinks
getLinks(): Link
[]
获取所有连接到本对象的Link
Returns
Link
[]
getLocalPoint
getLocalPoint(t
, segIndex?
): PointLike
获取对象边框或者线上某一点(本地坐标系)
Parameters
Name | Type |
---|---|
t | number |
segIndex? | number |
Returns
getPoint
getPoint(t
, segIndex?
): PointLike
获取对象上某一点
Parameters
Name | Type | Description |
---|---|---|
t | number | [0-1] 在线段上的比例 |
segIndex? | number | 线段索引(Node是矩形,有4条线段,索引:[0-3])可选项 |
Returns
getPositionNames
getPositionNames(): string
[]
获取本对象上定义的所有位置名称
Returns
string
[]
getRoot
getRoot(): DisplayObject
获取'root'对象, 沿着parent一直向上追溯
Returns
getSegmentPoints
Abstract
getSegmentPoints(): PointLike
[]
Returns
getStageTransform
getStageTransform(): any
Returns
any
getStyle
getStyle(name
): any
读取某个样式的值
Parameters
Name | Type |
---|---|
name | string |
Returns
any
getTransform
getTransform(): Transform
Returns
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
hide
hide(): DisplayObject
隐藏
Returns
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
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
querySelector
querySelector(querySelector
): DisplayObject
功能类似querySelectorAll,但只返回第一个满足条件的对象或者null
Parameters
Name | Type |
---|---|
querySelector | string | Function |
Returns
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
remove
remove(): DisplayObject
removeFromParent的简写。
推荐使用语义更明确的:removeFromParent()来替代。
Returns
removeAllChild
removeAllChild(): DisplayObject
移除所有子对象
Returns
removeAllClass
removeAllClass(): void
移除所有通过addClass添加的样式
obj.removeAllClass();
Returns
void
removeChild
removeChild(child
): DisplayObject
移除一个子对象
Parameters
Name | Type |
---|---|
child | DisplayObject |
Returns
removeChilds
removeChilds(childs
): DisplayObject
移除多个子对象
Parameters
Name | Type |
---|---|
childs | DisplayObject [] |
Returns
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
removeUserData
removeUserData(): DisplayObject
移除用户自定义的数据
Deprecated
已过时,直接设置 data 为空对象或者null 即可
Returns
screenToLocalVec
screenToLocalVec(vec
): Vec2
将一个屏幕坐标系下的向量转换到本地坐标系 @@since 2.5.0
Parameters
Name | Type |
---|---|
vec | Vec2 |
Returns
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
setUserData
setUserData(data
): DisplayObject
设置用户自定义数据
直接在节点对象上增加属性不是稳妥的方法,若要向节点增加额外的属性,应该调用此方法
Deprecated
已过时,直接访问 data 即可
Parameters
Name | Type |
---|---|
data | any |
Returns
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
showAllChild
showAllChild(): void
显示所有下级节点
Returns
void
stageToLocalVec
stageToLocalVec(vec
): Vec2
Deprecated
v2.5.0 后使用 screenToLocalVec 替代
Parameters
Name | Type |
---|---|
vec | Vec2 |
Returns
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
toLayerXY
toLayerXY(x
, y
): PointLike
Deprecated
v2.5.0 后使用 toWorldXY 替代
Parameters
Name | Type |
---|---|
x | number |
y | number |
Returns
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
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
getNoChildrensObjects
Static
getNoChildrensObjects(arr
): DisplayObject
[]
Parameters
Name | Type |
---|---|
arr | DisplayObject [] |