Tutorial: 动态修改元素颜色，虚实线，粗细

动态修改元素颜色，虚实线，粗细

updateElementById

该接口可动态更新元素的颜色，虚实线，粗细等功能，通常配合元素选中事件使用。

接口文档

使用示例：

// 监听元素选中事件
let selectedElementId = '';
teduBoard.on(TEduBoard.EVENT.TEB_SELECTED_ELEMENTS, (data) => {
  this.selectElements = data;
  if (this.selectElements.length) {
    const boxArea = {
      minX: Infinity,
      minY: Infinity,
      maxX: -Infinity,
      maxY: -Infinity,
    };
    // 算最大选中元素区域
    this.selectElements.forEach((element) => {
      boxArea.minX = Math.min(boxArea.minX, element.boundingbox.left);
      boxArea.maxX = Math.max(boxArea.maxX, element.boundingbox.left + element.boundingbox.width);
      boxArea.minY = Math.min(boxArea.minY, element.boundingbox.top);
      boxArea.maxY = Math.max(boxArea.maxY, element.boundingbox.top + element.boundingbox.height);
    });
    selectedElementId = this.selectElements[0];
  }
});


// 实例一：更新元素的颜色
teduBoard.updateElementById(selectedElementId, { 
  type: TEduBoard.TEduElementOperatorType.BOARDER_COLOR,
  value: 'rgba(255,0,0,1)'
})
// 实例二：更新元素的粗细
teduBoard.updateElementById(selectedElementId, { 
  type: TEduBoard.TEduElementOperatorType.BOARDER_WIDTH,
  value: 30
})
// 实例三：更新元素线条为实线
teduBoard.updateElementById(selectedElementId, { 
  type: TEduBoard.TEduElementOperatorType.BOARDER_LINE_TYPE,
  value: TEduBoard.TEduBoardLineType.TEDU_BOARD_LINE_TYPE_SOLID
})
// 实例四：更新元素线条为虚线
teduBoard.updateElementById(selectedElementId, { 
  type: TEduBoard.TEduElementOperatorType.BOARDER_LINE_TYPE,
  value: TEduBoard.TEduBoardLineType.TEDU_BOARD_LINE_TYPE_DOTTED
})
// 实例五：删除元素
teduBoard.updateElementById(selectedElementId, { 
  type: TEduBoard.TEduElementOperatorType.EL_DELETE,
  value: ''
})