DisplayObject

DisplayObject

显示对象, Node、Link的父类

构造器

new DisplayObject()

父类:

属性

children :Array

子节点集合

connectable :Boolean

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

deep :Number

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

depth :Number

厚度（仅3D视图下有意义）

draggable :Boolean

是否可拖拽

editable :Boolean

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

height :Number

高度

id

唯一标志，不能有重复

mouseEnabled :Boolean

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

origin :Array

本地坐标系的原点，默认为[0,0], 父节点的左上角

originAutoRotate :Boolean

是否跟随父节点(当父节点是Link的时候)旋转

parent :Object

上级对象

rotation :Number

旋转角度

scaleX :Number

水平缩放系数

scaleY :Number

垂直缩放系数

selectedStyle :Object

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

serializeable :Boolean

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

showSelected :Boolean

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

style :Style

样式

userData :Object

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

visible :Boolean

是否可见

width :Number

宽度

x :Number

坐标x

y :Number

坐标y

zIndex :Number

zIndex显示前后排序

Node默认为2，Link默认为1, Link默认绘制在Node的后面

方法

addChild(child)

增加子对象

参数:
Name Type Description
child Node

addChilds(child)

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

参数:
Name Type Description
child DisplayObject

addEventListener(type, callback)

继承自:

增加事件监听

参数:
Name Type Description
type String

事件类型
callback function

css(name, value)

1.3.8 新增方法，语法上支持一部分css样式

可以每次设置一个样式，如：obj.css('border', '1px solid ');

也可以一次设置一组样式，如: 

node.css({
    width: 48,
    height: '48px',
    border: 'solid 1px gray',
    borderRadius: 5,
    background: "white url('./demo/img/node2.png') no-repeat",
    backgroundSize: '32px 32px',
    backgroundPosition: 'center center',
    zIndex: 2,
    font: 'bold 11px arial',
    color: 'gray',
    textPosition: 'center',
    textAlign: 'center',
    textBaseline: 'middle',
});
参数:
Name Type Description
name Object
value String

如果不填写，就是读取样式

css3D()

1.4.4版本新增语法与css()方法使用方式基本一致

设置3D相关样式，仅3D试图下有意义

    // node: 3D立方体贴图-6个面 (left, right, top, bottom, front, back)
    node.css3D({
        materials : [
         './demo/img/pstn/router.png', 
         './demo/img/pstn/msc.png', 
         './demo/img/pstn/router.png',
         './demo/img/pstn/wdm.png', 
         './demo/img/pstn/modem.png', 
         './demo/img/pstn/terminal.png',
       ]
   });
   // link: 3D流动贴图( 在线条上移动的图片，通常是类似箭头的东西)
   link.css3D({
        materials : [
         flowMaterial: './demo/img/luobo2.png',
       ]
   });

</pre>

definePosition(name, fun)

定义一个位置

参数:
Name Type Description
name String
fun function

dispatchEvent(event)

继承自:

分发事件

参数:
Name Type Description
event Object

draw(ctx)

绘制具体内容

参数:
Name Type Description
ctx Object

Canvas.context

递归式 获取所有连线对象

调用返回:

所有连线对象

Type
Array.<Link>

getAllNodes() → {Array.<Node>}

递归式 获取所有节点对象

调用返回:

所有节点对象

Type
Array.<Node>

getCenter() → {object}

获取中心点 {x,y}, 即： {x: this.x + this.width/2, y:this.y + this.height/2}

调用返回:

{x:xx, y:xx}

Type
object

getChildren(childs)

获取所有子对象

参数:
Name Type Description
childs Array.<DisplayObject>

getLocalPoint(t, segIndex) → {Object}

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

参数:
Name Type Description
t number
segIndex number

可选项
调用返回:

{x:xx y:xx}

Type
Object

getPoint(t, segIndex) → {Object}

获取对象上某一点

参数:
Name Type Description
t number

[0-1] 在线段上的比例
segIndex number

线段索引(Node是矩形，有4条线段，索引：[0-3]）可选项
调用返回:

{x:xx y:xx}

Type
Object

getPosition(name, x, y) → {Object}

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

参数:
Name Type Description
name String

位置名称
x Number

name为nearest时需要
y Number

name为nearest时需要
调用返回:

{x:xxx, y:xxx}

Type
Object

getUserData()

读取用户自定义的数据

hasChild(child)

是否拥有子对象

参数:
Name Type Description
child DisplayObject
调用返回:

Boolean

hasListener(type)

继承自:

是否有该类型的监听

参数:
Name Type Description
type String

hide()

隐藏

isOutOfParent()

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

on(type, callback)

继承自:

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

参数:
Name Type Description
type string

事件类型
callback fucntion

事件处理函数

remove()

从父容器中移除

removeAllChild()

移除所有子对象

removeChild(child)

移除一个子对象

参数:
Name Type Description
child Object

removeChilds(childs)

移除多个子对象

参数:
Name Type Description
childs Array

removeEventListener(type, callback)

继承自:

移除一个事件监听

参数:
Name Type Description
type String
callback function

removeUserData()

移除用户自定义的数据

resizeBy(sw, sh)

按系统调整尺寸大小

参数:
Name Type Description
sw Number

宽度系数
sh Number

高度系数

resizeTo(width, height)

设置尺寸

参数:
Name Type Description
width number

宽度
height number

高度

rotateTo(angle)

旋转

参数:
Name Type Description
angle number

旋转角度（弧度）

scaleBy(sx, sy)

按系数缩放

参数:
Name Type Description
sx number

宽度缩放系数
sy number

高度缩放系数

scaleTo(sx, sy)

缩放

参数:
Name Type Description
sx number

水平缩放系数
sy number

垂直缩放系数

setStyles()

Deprecated:
  • Yes

方法已过时，请使用 .css(...) 替代

setUserData(data)

设置用户自定义数据

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

参数:
Name Type Description
data Object

setzIndex(index)

设置zIndex

参数:
Name Type Description
index Number

show()

显示

stageToLocalXY(x, y) → {Object}

将一个stage坐标转换到本地坐标系

参数:
Name Type Description
x Number
y Number
调用返回:

{x:Number, y:Number}

Type
Object

toJson() → {String}

生成json格式的数据

调用返回:

json

Type
String

toLayerXY(x, y) → {Object}

将一个本地坐标转到Layer坐标系

参数:
Name Type Description
x Number
y Number
调用返回:

{x:Number, y:Number}

Type
Object

toStageXY(x, y) → {Object}

将一个本地坐标转到stage坐标系

参数:
Name Type Description
x Number
y Number
调用返回:

{x:Number, y:Number}

Type
Object

translateCenterTo(x, y)

平移对象的中心点到指定位置(x,y)

参数:
Name Type Description
x Number
y Number

translatePositionTo(positionName, x, y)

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

参数:
Name Type Description
positionName String
x Number
y Number

translateTo(x, y)

平移对象到指定位置(x,y)

参数:
Name Type Description
x Number
y Number

translateWith(dx, dy) → {void}

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

参数:
Name Type Description
dx Number
dy Number
调用返回:
Type
void

zoom(sx, sy)

以中心点sx，sy做缩放

参数:
Name Type Description
sx Number

水平缩放
sy Number

垂直缩放

zoomIn()

放大到1.25

zoomOut()

缩小到0.8