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

本文介绍了三种方法修改BPMN元素颜色:1) 使用overlays定位并调整颜色;2) 利用bpmn2.0扩展API改变颜色;3) 结合Marker和CSS修改。通过示例代码与效果验证,展示了如何在业务流程中区分异步和同步任务。
摘要由CSDN通过智能技术生成

需求

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

一.通过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(
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老柳聊技术

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值