Link

Link

连线对象,有起点和终端;

创建和设置起止, 有以下形式:

var link = new Link('text', 开始对象, 结束对象, 开始端点, 结束端点);

var link = new Link();

link.text = 'text';

link.setBegin(开始对象, 端点)

link.setEnd(结束对象, 端点)

更多示例:

var link = new Link('text', beginNode, endNode);

var link = new Link('text', beginNode, endNode, 'center', 'center');

var link = new Link('text', beginNode, {x: 10, y:20}, 'center');

var link = new Link('text', {x: 10, y:20}, endNode, 'center');

var link = new Link('text', {x:0, y:0}, {x: 10, y:20});

构造器

参数:
Name Type Description
text string

文本,可为空

begin Object

开始节点对象

end Object

结束节点对象

beginEndpoint string

开始节点对象的‘定位点’, 可为空,默认为"center"

endEndpoint string

结束节点对象的‘定位点’, 可为空,默认为"center"

父类:

属性

begin :Object

连线的开始对象

比如:link.begin = {
  object: 对象[可以是Node、Link、也可以是一个简单的点:{x:12, y:12}], 
  position: 'center' // 可以为空,默认为 'center'
};

children :Array

继承自:

子节点集合

connectable :Boolean

继承自:

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

deep :Number

继承自:

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

depth :Number

继承自:

厚度(仅3D视图下有意义)

draggable :Boolean

继承自:

是否可以拖拽,默认:false

editable :Boolean

继承自:

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

end :Object

连线的结束对象

比如:link.end = {
 object: 对象[可以是Node、Link、也可以是一个简单的点:{x:12, y:12}], 
 position: 'center' // 可以为空,默认为 'center'
};

height :Number

继承自:

高度

id

继承自:

唯一标志,不能有重复

是否是Link类的对象, 主要用于和Node区分

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

序列化属性列表

serializers

序列化属性列表

showSelected :Boolean

继承自:

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

style :Style

继承自:

样式

text

文本

userData :Object

继承自:

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

visible :Boolean

继承自:

是否可见

width :Number

继承自:

宽度

x :Number

继承自:

坐标x

y :Number

继承自:

坐标y

zIndex :Number

继承自:

zIndex 控制显示前后排序

Link默认为1, Node默认为2,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

Cavans图形的上下文

继承自:

递归式 获取所有连线对象

调用返回:

所有连线对象

Type
Array.<Link>

getAllNodes() → {Array.<Node>}

继承自:

递归式 获取所有节点对象

调用返回:

所有节点对象

Type
Array.<Node>

getBeginPoint() → {Object}

获取连线的开始点坐标

调用返回:

比如 {x: 10, y:10}

Type
Object

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>

getEndPoint() → {Object}

获取连线的结束点坐标

调用返回:

比如 {x: 10, y:10}

Type
Object

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

垂直缩放系数

setBegin(target, positionName)

设置连线的开始点

参数:
Name Type Description
target Object

开始连接点对象,可以是Node、Link,也可以是一个简单的点,比如:{x:10, y:10}, 甚至是一个函数,函数返回的对象必须有x、y属性。

positionName String

setBeginArrow(node)

设置开始端的箭头

例如:link.setBeginArrow(new CircleNode()); // 圆形箭头

参数:
Name Type Description
node Node

setEnd(target, positionName)

设置连线的结束点

参数:
Name Type Description
target Object

连接对象,可以是Node、Link,也可以是一个简单的点,比如:{x:10, y:10}, 甚至是一个函数,函数返回的对象必须有x、y属性。

positionName String

端点

setEndArrow(node)

设置结束端的箭头

例如:link.setEndArrow(new ArrowNode()); // 箭头

参数:
Name Type Description
node Node

setLabel(textOrNode)

设置文本标签

link.setLabel(new TextNode('abc')); // 简写: link.text = 'abc';

参数:
Name Type Description
textOrNode Node

文字或者Node对象

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