控制对象

获取对象后，我们就可以通过对象的属性和方法来控制对象了。本章节中，我们将对控制对象的方法进行说明。

访问对象属性的语法

object.propertyName

访问对象方法的语法

object.methodName()

应用示例

下面的子章节中，将给出一些应用示例来说明控制对象的方法。

通过对象属性控制

下面的代码中，通过设置对象的 visible 属性，来改变对象的显示和隐藏。

// 初始化并加载场景
const graph = new THING.DIAGRAM.Graph({
  container: 'div1',
  url: 'diagram/b1bd9e58-e806-4b14-a965-3ec716e03bca'
})

// 在场景加载完成后，点击按钮，控制场景中的对象显示和隐藏
graph.on('load', function() {
  const node = graph.query('#100')[0]
  new THING.widget.Button('隐藏节点', function() {
    node.visible = false
  })
  new THING.widget.Button('显示节点', function() {
    node.visible = true
  })
})

下面的代码中，通过设置对象的 style 属性，来改变对象的样式。

node.style.fill = 'red' // 设置节点的填充色为红色
node.style.stroke = 'green' // 设置节点的描边色为绿色

通过对象方法控制

下面的代码中，我们可以通过 moveTo() 方法来控制对象移动。

node.moveTo([100, 200]) // 等同于 node.position = [100, 200]

通过 update 方法批量控制

当需要同时修改对象的多个属性时，可以通过 update 方法来实现。

// 同时更新节点的位置、样式、比例
node.update({
  position: [200, 200],
  style: {
    fill: 'red',
    stroke: '#fff'
  },
  scale: 2
})

参考信息

下面列出了一些可设置的对象属性和方法。

常用属性

属性	类型	说明	代码示例
key	string	对象主键，连线上记录节点的标识	/
visible	boolean	对象显示或隐藏状态。	obj.visible = true
style	object	对象样式	obj.style.stroke = 'blue'
label	string	对象的标签文字	obj.label = '192.168.1.1'
scale	number	对象的缩放比例	obj.scale = 2

常用节点属性

属性	类型	说明
width	number	节点宽度
height	number	节点高度
position	array	节点坐标位置
angle	number	节点角度
image	string	节点图标地址

常用连线属性

属性	类型	说明
source	string	源节点 key
target	string	目标节点 key

常用样式属性

属性	类型	说明	代码示例
fill	string	填充色	obj.style.fill = 'red'
stroke	string	描边色	obj.style.storke = 'blue'
strokeWidth	number	描边粗细 / 线条宽度	obj.style.strokeWidth = 5
opacity	number	透明度	obj.style.opacity = 0.5
fontColor	string	文字颜色	obj.style.fontColor = 'blue'
fontSize	number	文字大小	obj.style.fontSize = 20
fontWeight	string	文字粗细	obj.style.fontWeight = 'bold'

注：图片类型的节点不支持 fill、stroke、strokeWidth 的样式属性

对象常用方法

方法	说明
show()	设置对象显示
hide()	设置对象隐藏
flicker()	闪烁
stopFlicker()	停止闪烁
isFlickering()	对象是否正在闪烁
animate()	动画，请参阅动画教程

// 节点默认闪烁效果
node.flicker() 

// 自定义参数的闪烁
node.flicker({ 
  color: 'yellow', // 闪烁颜色，默认是 red
  blur: 30, // 闪烁效果大小，默认是 20
  duration: 1000 // 一次闪烁动画的执行时长（毫秒，数值越大，闪烁速度越慢），默认是 800
})

// 停止闪烁
node.stopFlicker()

节点常用方法

方法	说明
moveTo()	设置对象移动到某位置，第二个可选参数为动画参数配置
stopMoving()	结束移动动画
rotateTo()	设置对象旋转到某角度，第二个可选参数为动画参数配置
stopRotating()	结束旋转动画
play()	播放（适用于Gif格式的图片节点）
pause()	暂停（适用于Gif格式的图片节点）
getLinks()	获取与当前节点有关联的所有连线
getInLinks()	获取与当前节点关联的所有入线
getOutLinks()	获取与当前节点关联的所有出线

// 通过第二个参数自定义移动动画效果
node.moveTo([100, 200], {
  duration: 500,
  finished: function() {
    console.log('完成移动动画')
  }
})

// 结束移动动画
node.stopMoving()

连线常用方法

方法	说明
getSource()	获取当前连线的起始节点
getTarget()	获取当前连线的目标节点
flow()	线流动效果
stopFlow()	线停止流动
isFlowing()	线是否正在流动

// 线默认流动效果
link.flow() 

// 自定义参数的流动
link.flow({ 
  color: 'yellow', // 流动颜色，默认是 #fff
  width: 5, // 流动效果的粗细，默认是 3
  duration: 500, // 流动效果的执行时长（数值越大，流动速度越慢，默认是 600）
  finished: function() { // 完成一次流动的回调函数
    console.log('完成一次流动')
  }
})

// 停止流动
link.stopFlow()

下一个教程中，我们来学习选择。

2.6.3 控制对象