8.多种方式修改元素颜色

需求

         有时需要对特定元素显示不同的颜色，特别是业务中有分组的情况时，起一个标识作用，比如哪些任务是异步执行的，哪些是同步的。下面介绍三种方式来修改元素的颜色。

一.通过overlays来修改颜色

      同上一节overlays的使用方法，可以使用overlays来修改指定的BPMN元素的颜色，这种需要用的position进行定位，可以修改position的值查看效果，会发现相对位置会变动。以元素左上角为原点。

添加代码

  let overlays = this.bpmnModeler.get('overlays')
  let elementRegistry = this.bpmnModeler.get('elementRegistry')
  let shape = elementRegistry.get('_6-695');
  overlays.add('_6-695', {
          position: { top: 0, left: 0 },
          html: '<div class="highlight-overlay"></div>'
        });
  let doms = document.getElementsByClassName("highlight-overlay");
  doms[0].style.width = shape.width + "px";
  doms[0].style.height = shape.height + "px";

添加css