Skip to content

@jtopo/extensions / RipplingNode

Class: RipplingNode

涟漪动效节点

该节点不显示文本、边框、没有样式,只显示涟漪动效。

Hierarchy

  • AENode

    RipplingNode

Table of contents

Constructors

Properties

Accessors

Methods

Constructors

constructor

new RipplingNode(text?, x?, y?, w?, h?)

Parameters

NameTypeDefault value
text?stringundefined
xnumber0
ynumber0
wnumber50
hnumber50

Overrides

AENode.constructor

Properties

afterRender

Optional afterRender: Function

渲染后回调

Inherited from

AENode.afterRender


animations

animations: Animation[] = []

动效动画列表

Inherited from

AENode.animations


attributes

Readonly attributes: Object

Since

2.6.0 存放自定义属性(用于定义节点类型,和业务数据无关)

Index signature

▪ [key: string]: any

Inherited from

AENode.attributes


beforeRender

Optional beforeRender: Function

渲染前回调

js
obj.beforeRender = function(){
   if(this.x < 0){
       this.x = 0;
   }
   //...
}

Inherited from

AENode.beforeRender


children

Readonly children: NE[]

子节点(直接下级)

Inherited from

AENode.children


classList

Readonly classList: string[]

通过addClass添加的样式名称列表

Inherited from

AENode.classList


data

Optional data: any

通常存放业务含义的数据

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

Since

2.4.0

Inherited from

AENode.data


deep

deep: number

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

只读

Inherited from

AENode.deep


destroyed

Readonly destroyed: boolean

是否已经被销毁

Inherited from

AENode.destroyed


draggable

draggable: boolean

是否可拖拽

Inherited from

AENode.draggable


dropAllowed

dropAllowed: boolean

是否可以作为拖拽目标

Since

2.4.0

Inherited from

AENode.dropAllowed


id

Optional id: string | number

id, 标识,由开发人员控制和设计

Inherited from

AENode.id


Readonly inLinks: Link[]

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

Inherited from

AENode.inLinks


isLayer

Optional Readonly isLayer: boolean

是否是Layer对象, 可以使用 instanceof 替代

Inherited from

AENode.isLayer


Optional Readonly isLink: boolean

是否是Link对象, 可以使用 instanceof 替代

Inherited from

AENode.isLink


isNode

isNode: boolean

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

Inherited from

AENode.isNode


isSelected

Readonly isSelected: boolean

是否被选中了

Inherited from

AENode.isSelected


name

Optional name: string

名称,可以在编辑时指定,运行时通过名称获取对象的引用

Inherited from

AENode.name


originPosition

Readonly originPosition: RectPositionType = 'center'

原点位置

Inherited from

AENode.originPosition


Readonly outLinks: Link[]

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

Inherited from

AENode.outLinks


ownerLayer

Optional ownerLayer: Layer

所属的Layer

Since

2.6.0

Inherited from

AENode.ownerLayer


parent

Optional parent: NE

上级对象

Inherited from

AENode.parent


pointerEnabled

pointerEnabled: boolean

是否响应(鼠标、触摸屏指针),为false的时候,不响应动作

Since

2.6.0

Inherited from

AENode.pointerEnabled


rotateWithParent

rotateWithParent: boolean

是否跟随父节点旋转

Inherited from

AENode.rotateWithParent


selectedStyle

Optional selectedStyle: NodeSelectedStyleOptionsType | LinkSelectedStyleOptionsType

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

Inherited from

AENode.selectedStyle


serializeable

serializeable: boolean

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

Inherited from

AENode.serializeable


showSelected

showSelected: boolean

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

Inherited from

AENode.showSelected


style

Readonly style: Style

样式

Inherited from

AENode.style


title

Optional title: string

鼠标指向时显示的提示信息,和HTML中dom元素的title属性作用相同

Inherited from

AENode.title


type

Optional type: string

类型,自定义类型

可用于自定义节点,区分节点类型

比用data属性更方便一点

Inherited from

AENode.type

Accessors

bottom

get bottom(): number

Since

2.4.0

Returns

number

Inherited from

AENode.bottom

set bottom(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

AENode.bottom


height

get height(): number

Returns

number

Overrides

AENode.height

set height(h): void

Parameters

NameType
hnumber

Returns

void

Overrides

AENode.height


left

get left(): number

Since

2.4.0

Returns

number

Inherited from

AENode.left

set left(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

AENode.left


get right(): number

Since

2.4.0

Returns

number

Inherited from

AENode.right

set right(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

AENode.right


rotation

get rotation(): number

旋转角度 (弧度)

Returns

number

Inherited from

AENode.rotation

set rotation(v): void

设置旋转角度 (弧度)

Parameters

NameType
vnumber

Returns

void

Inherited from

AENode.rotation


scaleX

get scaleX(): number

Returns

number

Inherited from

AENode.scaleX

set scaleX(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

AENode.scaleX


scaleY

get scaleY(): number

Returns

number

Inherited from

AENode.scaleY

set scaleY(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

AENode.scaleY


skewX

get skewX(): number

Returns

number

Inherited from

AENode.skewX

set skewX(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

AENode.skewX


skewY

get skewY(): number

Returns

number

Inherited from

AENode.skewY

set skewY(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

AENode.skewY


text

get text(): string

Returns

string

Inherited from

AENode.text

set text(v): void

Parameters

NameType
vstring

Returns

void

Inherited from

AENode.text


top

get top(): number

Since

2.4.0

Returns

number

Inherited from

AENode.top

set top(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

AENode.top


visible

get visible(): boolean

Returns

boolean

Inherited from

AENode.visible

set visible(v): void

Parameters

NameType
vboolean

Returns

void

Inherited from

AENode.visible


width

get width(): number

Returns

number

Overrides

AENode.width

set width(w): void

Parameters

NameType
wnumber

Returns

void

Overrides

AENode.width


x

get x(): number

Returns

number

Inherited from

AENode.x

set x(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

AENode.x


y

get y(): number

Returns

number

Inherited from

AENode.y

set y(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

AENode.y


z

get z(): number

Returns

number

Inherited from

AENode.z

set z(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

AENode.z


zIndex

get zIndex(): number

Returns

number

Inherited from

AENode.zIndex

set zIndex(v): void

设置zInde 相同父节点下的兄弟节点之间才有意义

Parameters

NameType
vnumber

Returns

void

Inherited from

AENode.zIndex

Methods

addChild

addChild(child): RipplingNode

增加子对象

  • 父对象和zIndex均相同的情况下,后来add的会显示在上面
  • 默认情况下所有对象的 zIndex是 1

Parameters

NameType
childNE

Returns

RipplingNode

Inherited from

AENode.addChild


addChildren

addChildren(childs): RipplingNode

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

注意:避免互为子节点、重复添加。

Parameters

NameType
childsNE[]

Returns

RipplingNode

Inherited from

AENode.addChildren


addClass

addClass(styleName): RipplingNode

增加一个样式

js
obj.addClass('.focus');

Parameters

NameType
styleNamestring

Returns

RipplingNode

Inherited from

AENode.addClass


addEventListener

addEventListener(type, callback): void

Parameters

NameType
typestring
callbackFunction

Returns

void

Inherited from

AENode.addEventListener


ae

ae(opt): void

设置动效参数

Parameters

NameType
optRipplingOption

Returns

void

Overrides

AENode.ae


changeParent

changeParent(newParent): RipplingNode

修改父对象但保持世界坐标不变

Parameters

NameType
newParentNE

Returns

RipplingNode

Inherited from

AENode.changeParent


clearStyles

clearStyles(): RipplingNode

清除通过css或setStyles定义的所有样式

Returns

RipplingNode

Inherited from

AENode.clearStyles


contains

contains(targe): boolean

方法返回一个布尔值,表示一个对象是否是给定节点的后代,即该节点本身、其直接子节点(children)、子节点的直接子节点等。 备注: 节点包含在自身内部。

Parameters

NameType
targeNE

Returns

boolean

Inherited from

AENode.contains


destroy

destroy(): void

Returns

void

Inherited from

AENode.destroy


dispatchEvent

dispatchEvent(event): void

分发事件

Parameters

NameType
eventEvent | EventBase

Returns

void

Inherited from

AENode.dispatchEvent


draw

draw(ctx): void

Parameters

NameType
ctxCanvasRenderingContext2D

Returns

void

Overrides

AENode.draw


getAABB

getAABB(recursive?): Rectangle

获取对象在Layer中的aabb包围盒 (包围盒是世界坐标系)

Parameters

NameTypeDescription
recursive?boolean是否将子节点包含在内

Returns

Rectangle

Inherited from

AENode.getAABB


getAnchor

getAnchor(name): AnchorProxy

根据名称获取并生成一个 ‘锚点‘

Parameters

NameType
namestring

Returns

AnchorProxy

Inherited from

AENode.getAnchor


getAttribute

getAttribute(name, defaultValue?): any

读取某个属性值

js
// 例如:
let v1 = obj.getAttribute('foo');       //如果foo属性不存在,则返回undefined
let v2 = obj.getAttribute('bar', 123);  //如果bar属性不存在,则返回123

Parameters

NameTypeDescription
namestring
defaultValue?any如果属性值为空时的默认替代

Returns

any

Inherited from

AENode.getAttribute


getChildren

getChildren(): NE[]

获取所有子对象

Returns

NE[]

Inherited from

AENode.getChildren


getComputedStyle

getComputedStyle(): Style

获取:主题、自定义样式类、css方法三者层叠后的样式结果

(只读,不要修改返回的对象)

Returns

Style

Inherited from

AENode.getComputedStyle


getInLinks(): Link[]

Returns

Link[]

Inherited from

AENode.getInLinks


getLinks(): Link[]

获取所有连接到本对象的Link

Returns

Link[]

Inherited from

AENode.getLinks


getLocalPoint

getLocalPoint(t, segIndex?): PointLike

获取对象上某一点(本地坐标系)

Parameters

NameTypeDescription
tnumber[0-1] 在线段上的比例
segIndex?number线段索引(Node是矩形,有4条线段,索引:[0-3])可选项

Returns

PointLike

Inherited from

AENode.getLocalPoint


getOutLinks(): Link[]

Returns

Link[]

Inherited from

AENode.getOutLinks


getPoint

getPoint(t, segIndex?): PointLike

获取对象上某一点

Parameters

NameTypeDescription
tnumber[0-1] 在线段上的比例
segIndex?number线段索引(矩形,有4条线段,索引:[0-3])可选项

Returns

PointLike

Inherited from

AENode.getPoint


getPointAnchor

getPointAnchor(x, y): AnchorProxy

根据本地坐标并生成一个 ’锚点‘

Parameters

NameType
xnumber
ynumber

Returns

AnchorProxy

Inherited from

AENode.getPointAnchor


getRoot

getRoot(): RipplingNode

获取'root'对象, 沿着parent一直向上追溯 , 直到parent为null或Layer对象结束

Returns

RipplingNode

Inherited from

AENode.getRoot


getSegmentAnchor

getSegmentAnchor(t, segIndex): AnchorProxy

获取并生成线段上某个位置的 ’锚点’

Parameters

NameType
tnumber
segIndexnumber

Returns

AnchorProxy

Inherited from

AENode.getSegmentAnchor


getShape

getShape(): Shape

获取形状对象

Returns

Shape

Inherited from

AENode.getShape


getStyle

getStyle(name): any

读取某个样式的值

Parameters

NameType
namestring

Returns

any

Inherited from

AENode.getStyle


getWorldTransform

getWorldTransform(): Transform

获取世界坐标系变换

Returns

Transform

Inherited from

AENode.getWorldTransform


hasChild

hasChild(child): boolean

是否拥有某个下级子对象

Parameters

NameType
childNE

Returns

boolean

Inherited from

AENode.hasChild


hasChildren

hasChildren(): boolean

是否拥有子对象

Returns

boolean

Inherited from

AENode.hasChildren


hasClass

hasClass(styleName): boolean

检测是否拥有某个样式类

js
node.hasClass('.focus');

Since

2.4.0

Parameters

NameType
styleNamestring

Returns

boolean

Inherited from

AENode.hasClass


hasListener

hasListener(type): boolean

是否有该类型的监听

Parameters

NameType
typestring

Returns

boolean

Inherited from

AENode.hasListener


hide

hide(): RipplingNode

隐藏

Returns

RipplingNode

Inherited from

AENode.hide


hideAllChildren

hideAllChildren(): RipplingNode

隐藏所有下级节点

Returns

RipplingNode

Inherited from

AENode.hideAllChildren


hitTest

hitTest(x, y): boolean

判断给定的坐标(世界坐标系)是否在对象内部

Parameters

NameType
xnumber
ynumber

Returns

boolean

Inherited from

AENode.hitTest


isConnected

isConnected(): boolean

是否被任意Link连接到

Since

2.4.0

Returns

boolean

Inherited from

AENode.isConnected


isVisible

isVisible(): boolean

判断是否可见

Returns

boolean

Inherited from

AENode.isVisible


localToWorldXY

localToWorldXY(x, y): Object

将一个本地坐标转到世界坐标系

Since

2.5.0

Parameters

NameType
xnumber
ynumber

Returns

Object

NameType
xnumber
ynumber

Inherited from

AENode.localToWorldXY


markDirty

markDirty(): void

标记矩阵脏, 需要重新计算触发重绘

Returns

void

Inherited from

AENode.markDirty


pause

pause(): void

暂停动画

Returns

void

Inherited from

AENode.pause


pickable

pickable(): boolean

是否可被拾取到,默认返回:pointerEnabled 属性

js
pickable() {
   return this.pointerEnabled;
}

Returns

boolean

Inherited from

AENode.pickable


play

play(): void

播放动画

Returns

void

Inherited from

AENode.play


querySelector

querySelector(querySelector): NE

功能类似querySelectorAll,但只返回第一个满足条件的对象或者null

Parameters

NameType
querySelectorstring | (child: Node | Link) => boolean

Returns

NE

Inherited from

AENode.querySelector


querySelectorAll

querySelectorAll(querySelector?): NE[]

对象选择器

语法兼容DOM的Selector API标准(并不支持标准里的所有语法)

支持的语法形式如下:

js

//obj.querySelector(类名称), 例如:
let ellipseNodes = layer.querySelectorAll('EllipseNode');
let links = layer.querySelector('Link');

//obj.querySelector(样式名称),例如:
let serverNodes = layer.querySelectorAll('.server');
let activedObjs = layer.querySelectorAll('.active');

let arr = layer.querySelectorAll(obj => obj.x > 20 && obj.y < 100);

//obj.querySelector(ID);
let obj = layer.querySelectorAll('#123')[0];

//obj.querySelector([属性名称=""]); 
let arr = layer.querySelectorAll('[text="abc"]');
let arr2 = layer.querySelectorAll('[draggable=true]');

// obj.querySelector(类名称|样式名称[属性名称=""]); 
let obj = layer.querySelector('TextNode[x<=-200]');
let obj2 = layer.querySelector('.server[text="X86"]');

Parameters

NameType
querySelector?string | (child: Node | Link) => boolean

Returns

NE[]

Inherited from

AENode.querySelectorAll


removeAllChildren

removeAllChildren(): RipplingNode

移除所有子对象

Returns

RipplingNode

Inherited from

AENode.removeAllChildren


removeAllClass

removeAllClass(): RipplingNode

移除所有通过addClass添加的样式

js
obj.removeAllClass();

Returns

RipplingNode

Inherited from

AENode.removeAllClass


removeAttribute

removeAttribute(name): void

移除一个属性

js
// 例如:
obj.removeAttribute('foo');

Parameters

NameType
namestring

Returns

void

Inherited from

AENode.removeAttribute


removeChild

removeChild(child): RipplingNode

移除一个子对象

Parameters

NameType
childNE

Returns

RipplingNode

Inherited from

AENode.removeChild


removeChildren

removeChildren(childs): RipplingNode

Parameters

NameType
childsNE[]

Returns

RipplingNode

Inherited from

AENode.removeChildren


removeClass

removeClass(styleName): void

移除一个样式

js
obj.removeClass('.focus');

Parameters

NameType
styleNamestring

Returns

void

Inherited from

AENode.removeClass


removeEventListener

removeEventListener(type, callback): void

Parameters

NameType
typestring
callbackFunction

Returns

void

Inherited from

AENode.removeEventListener


removeFromParent

removeFromParent(): RipplingNode

移除

Returns

RipplingNode

Inherited from

AENode.removeFromParent


resize

resize(width, height): RipplingNode

设置尺寸

Parameters

NameTypeDescription
widthnumber宽度
heightnumber高度

Returns

RipplingNode

Inherited from

AENode.resize


resizeWith

resizeWith(w, h): RipplingNode

原有尺寸基础上增加

Parameters

NameType
wnumber
hnumber

Returns

RipplingNode

Inherited from

AENode.resizeWith


rotate

rotate(angle): RipplingNode

旋转

Parameters

NameTypeDescription
anglenumber旋转角度(弧度)

Returns

RipplingNode

Inherited from

AENode.rotate


rotateWith

rotateWith(dAngle): RipplingNode

旋转-增量性

Parameters

NameTypeDescription
dAnglenumber旋转角度的增量(弧度制)

Returns

RipplingNode

Inherited from

AENode.rotateWith


scale

scale(x, y): RipplingNode

缩放

Parameters

NameType
xnumber
ynumber

Returns

RipplingNode

Inherited from

AENode.scale


scaleBy

scaleBy(x, y): RipplingNode

按系数缩放, 在当前缩放的基础上再乘以指定缩放系数

Parameters

NameType
xnumber
ynumber

Returns

RipplingNode

Inherited from

AENode.scaleBy


setAttribute

setAttribute(name, value): void

设置自定义属性

Parameters

NameType
namestring
valueany

Returns

void

Inherited from

AENode.setAttribute


setAttributes

setAttributes(attrs): RipplingNode

一次性设置多个属性

js
// 一次性设置多个属性
obj.setAttributes({
foo: 'abc',
bar: false
});

Parameters

NameType
attrsstring | { [key: string]: any; }

Returns

RipplingNode

Inherited from

AENode.setAttributes


setOriginOnLink(t, lineSegmentIndex?): RipplingNode

将节点定位到连线的某个位置上,该位置随连线变化而变

Parameters

NameTypeDefault valueDescription
tnumberundefined位置百分比
lineSegmentIndexanynull线段索引(默认是null,表示中间的线段)

Returns

RipplingNode

Inherited from

AENode.setOriginOnLink


setOriginPosition

setOriginPosition(position): RipplingNode

Parameters

NameType
positionRectPositionType

Returns

RipplingNode

Inherited from

AENode.setOriginPosition


setSize

setSize(width, height): RipplingNode

设置尺寸, 与resize完全等价

Parameters

NameTypeDescription
widthnumber宽度
heightnumber高度

Returns

RipplingNode

Inherited from

AENode.setSize


setStyle

setStyle(styleName, value): RipplingNode

设置某一个样式

Parameters

NameType
styleNameStyleKeyType
valueany

Returns

RipplingNode

Inherited from

AENode.setStyle


setStyles

setStyles(styles): RipplingNode

背景和边框的设置语法参考css样式, 图形绘制的语法使用cavnas属性设置,如下:

js
node.setStyles({
   // 用类似css语法设置节点的:边框、字体、背景 的属性
   border: '10px gray',
   borderRadius: 10,
   font: 'bold 20px serif',
   color: 'gray',
   backgroundColor: "rgba(128,128,128,0.2)",

   // 内边距(边框和图形的间距)
   padding: 10,

   // 用Canvas绘图属性来设置节点内图形的:填充、画笔粗细、颜色、字体位置
   strokeStyle: 'gray',
   fillStyle: 'rgba(0,0,255,0.2)',
   lineWidth: 3, 
   textPosition: 'center',
   textBaseline: 'middle',
});

Parameters

NameType
stylesPartStyleOptionType

Returns

RipplingNode

Inherited from

AENode.setStyles


setText

setText(v): void

Parameters

NameType
vstring

Returns

void

Inherited from

AENode.setText


setXY

setXY(x, y): RipplingNode

设置坐标, translate的简写

Parameters

NameType
xnumber
ynumber

Returns

RipplingNode

Inherited from

AENode.setXY


setZIndex

setZIndex(index): void

设置zIndex

当两个同⽗元素z-index相同时,后⾯的元素显⽰在上⾯

Parameters

NameTypeDescription
indexnumber建议范围 [1, 999]

Returns

void

Inherited from

AENode.setZIndex


setupAE

setupAE(): void

Returns

void

Overrides

AENode.setupAE


show

show(): RipplingNode

显示

Returns

RipplingNode

Inherited from

AENode.show


showAllChildren

showAllChildren(): RipplingNode

显示所有下级节点

Returns

RipplingNode

Inherited from

AENode.showAllChildren


skew

skew(skewX, skewY): RipplingNode

错切

Parameters

NameType
skewXnumber
skewYnumber

Returns

RipplingNode

Inherited from

AENode.skew


toJSON

toJSON(): any

Returns

any

Inherited from

AENode.toJSON


translate

translate(x, y): RipplingNode

平移对象,与setXY()完全等价

只是从图形的语义上平移更接近本质:有相对性的意识

Parameters

NameType
xnumber
ynumber

Returns

RipplingNode

Inherited from

AENode.translate


translateTo

translateTo(x, y): RipplingNode

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

Deprecated

Parameters

NameType
xnumber
ynumber

Returns

RipplingNode

Inherited from

AENode.translateTo


translateWith

translateWith(x, y): RipplingNode

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

Parameters

NameType
xnumber
ynumber

Returns

RipplingNode

Inherited from

AENode.translateWith


update

update(): void

请求更新画面

Returns

void

Inherited from

AENode.update


updateMatrix

updateMatrix(): RipplingNode

Returns

RipplingNode

Inherited from

AENode.updateMatrix


updateZIndex

updateZIndex(): RipplingNode

更新直接下级子对象的zIndex

Returns

RipplingNode

Inherited from

AENode.updateZIndex


worldToLocalXY

worldToLocalXY(x, y): Object

将一个世界坐标转到本地坐标系

Since

2.6.0

Parameters

NameType
xnumber
ynumber

Returns

Object

NameType
xnumber
ynumber

Inherited from

AENode.worldToLocalXY