控制对象

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

访问对象属性的语法

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()

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

该文件修订时间: 2022-02-28 16:19:58

results matching ""

    No results matching ""