RatioNode

RatioNode

比率节点 ,用矩形填充的方式表达:比例、利用率、占比、进度条

可以设置方向

例如:
var ratioNode = new RatioNode('', 283, 465, 80, 40);
ratioNode.ratio = 0.65;
ratioNode.direction = 'right';
ratioNode.css({
    border: '2px solid black',
    ratioColor: 'gray'
});

构造器

new RatioNode()

父类:

属性

children :Array

继承自:

子节点集合

connectable :Boolean

继承自:

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

deep :Number

继承自:

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

depth :Number

继承自:

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

direction :String

方向,朝向:right、left、up、down ,默认:right

draggable :Boolean

继承自:

是否可拖拽

editable :Boolean

继承自:

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

height :Number

继承自:

高度

id

继承自:

唯一标志,不能有重复

imageSrc :String

继承自:

图片的src

继承自:

所有以本节点为结束点的Link对象数组

isNode :Boolean

继承自:

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

mouseEnabled :Boolean

继承自:

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

origin :Array

继承自:

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

originAutoRotate :Boolean

继承自:

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

继承自:

所有以本节点为开始点的Link对象数组

parent :Object

继承自:

上级对象

ratio :number

比率:通常取值范围是[0-1], 默认: 0.5

rotation :Number

继承自:

旋转角度

scaleX :Number

继承自:

水平缩放系数

scaleY :Number

继承自:

垂直缩放系数

selectedStyle :Object

继承自:

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

serializeable :Boolean

继承自:

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

serializers

继承自:

序列化属性列表

showSelected :Boolean

继承自:

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

style :Style

继承自:

样式

text :String|null

继承自:

节点文本

多行直接可以使用\n换行

textOffsetX :Number

继承自:

文本水平偏移量

textOffsetY :Number

继承自:

文本垂直偏移量

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

高度

resizeToFitImage()

继承自:

调整尺寸到图片的实际大小

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

垂直缩放系数

setImage(img)

继承自:

设置图片

参数:
Name Type Description
img String

图片的路径或者图片(Image), 或者 HtmlImage 或者 Canvas

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

translateBy(sx, yx)

继承自:

按系数平移对象

参数:
Name Type Description
sx Number

x坐标系数

yx Number

y坐标系数

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