Layer

Layer

只用作展示的层，每个层对应一个Canvas.

每个层有自己的帧数控制

构造器

new Layer(name)

参数:
Name Type Description
name String

名字

父类:

属性

children :Array

继承自:

子节点集合

connectable :Boolean

继承自:

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

deep :Number

继承自:

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

depth :Number

继承自:

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

displayList

绘制在当前画布上对象列表

draggable :Boolean

继承自:

是否可拖拽

editable :Boolean

继承自:

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

frames :Number

设置Layer的绘制帧率（每秒重绘的次数）

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，序列化时将跳过该对象

serializers

序列化属性列表

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

centerBy(node)

平移Layer，将node对象作为还不显示的中心

参数:
Name Type Description
node Node

可为null

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

find(name, value, recursive) → {Array}

根据属性来查找Layer中的对象

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

.

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

.

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

.
参数:
Name Type Description
name String

属性名称
value Object

属性值
recursive Boolean

是否递归查找下级子节点
调用返回:
Type
Array
继承自:

递归式 获取所有连线对象

调用返回:

所有连线对象

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

垂直缩放系数

setBackground()

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

setRenderView()

自定义渲染器

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

translateObjectsCenterTo(nodes, x, y)

将一组Node的中心点平移到指定x，y

参数:
Name Type Description
nodes Array
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

update()

更新，申请画面重绘

zoom(sx, sy)

继承自:

以中心点sx，sy做缩放

参数:
Name Type Description
sx Number

水平缩放
sy Number

垂直缩放

zoomIn()

继承自:

放大到1.25

zoomOut()

继承自:

缩小到0.8