构造器
new ArcLink()
父类:
属性
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
- 继承自:
唯一标志,不能有重复
isLink :Boolean
- 继承自:
是否是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
- 继承自:
序列化属性列表
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图形的上下文 |
getAllLinks() → {Array.<Link>}
- 继承自:
递归式 获取所有连线对象
调用返回:
所有连线对象
- 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