整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

在Vue3中实现BPMN图的动态着色

文由ScriptEcho平台提供技术支持

项目地址:传送门

bpmn-js 中使用颜色高亮元素

应用场景

bpmn-js 是一个用于创建和编辑 BPMN 2.0 图表的 JavaScript 库。它广泛应用于流程建模、业务流程管理和企业架构等领域。

基本功能

本代码演示了如何在 bpmn-js 中使用颜色高亮元素。通过以下三种方式实现:

  1. 通过覆盖层:在元素上添加一个覆盖层,并设置其颜色。
  2. 通过 BPMN 2.0 扩展:使用 bpmn-js 提供的 API 设置元素的颜色。
  3. 通过标记和 CSS 样式:添加一个标记并使用 CSS 样式设置元素的颜色。

功能实现步骤及关键代码分析

1. 导入依赖项

首先,导入必要的 JavaScript 和 CSS 依赖项。

import { onMounted } from 'vue'

2. 异步加载资源

在 onMounted 钩子中,异步加载 JavaScript 和 CSS 文件。

const loadStyle = (styleUrl) => { ... }
const loadJavascript = (jsUrl) => { ... }

onMounted(async () => {
await Promise.all(jsUrls.map((jsUrl) => loadJavascript(jsUrl)))
await Promise.all(styleUrls.map((styleUrl) => loadStyle(styleUrl)))

3. 初始化 bpmn-js 查看器

使用 new BpmnJS 创建一个 bpmn-js 查看器。

var viewer = new BpmnJS({
  container: '#diagram',
})

4. 显示带有高亮的图表

从远程 URL 加载 BPMN 图表 XML,并使用 showDiagram 函数对其进行渲染和高亮。

async function showDiagram(diagramXML) {
  await viewer.importXML(diagramXML)

5. 高亮元素

使用以下三种方法之一高亮元素:

通过覆盖层

var $overlayHtml = window.$('<div class="highlight-overlay">').css({
  width: shape.width,
  height: shape.height,
})

overlays.add('CalmCustomerTask', {
position: {
top: 0,
left: 0,
},
html: $overlayHtml,
})

通过 BPMN 2.0 扩展

modeling.setColor([elementToColor], {
  stroke: 'green',
  fill: 'green',
})

通过标记和 CSS 样式

canvas.addMarker('OrderReceivedEvent', 'highlight')

6. 自定义 CSS 样式

在 <style> 标签中定义自定义 CSS 样式,用于设置高亮元素的样式。

.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
  fill: green !important; /* color elements as green */
}

.highlight-overlay {
background-color: green; /* color elements as green /
opacity: 0.4;
pointer-events: none; / no pointer events, allows clicking through onto the element */
border-radius: 10px;
}

总结与展望

通过这段代码,我们了解了如何在 bpmn-js 中使用颜色高亮元素。这在流程建模中非常有用,可以帮助可视化和理解复杂流程。

未来,可以考虑扩展此功能,例如:

  • 添加更多高亮颜色选项
  • 允许用户自定义高亮规则
  • 集成其他 BPMN 2.0 扩展,以提供更高级的高亮功能
  • 更多组件:

获取更多Echos

本文由ScriptEcho平台提供技术支持

项目地址:传送门

微信搜索ScriptEcho了解更多

、新建项目

1、新建===web项目===输入项目名称====完成


二、新建html文件

在新建项目中新建html模板


输入文件名称:


三、认识基本格式


联想出基本格式:



四、编辑html文件


运行html,选择浏览器



五、html常用的快捷键

(1)ctrl+n+w web项目创建



(2)ctrl+n+h html文档创建


(3)ctrl+s 保存html页面(页面上如果未保存会显示*号)



(4)ctrl+r html运行
(5)ctrl+z 撤回
(6)!+tab键 联想基本格式
(7)ctrl+/ 注释和取消注释



(8)ctrl+鼠标滚轮, 字体方大和缩小


六、认识标签

(1)H标签(标题标签)



(2)p标签 (段落标签)



(3)img 标签(图片标签)
两种:第一种widows上传图片,第二种:网上图片链接

第一种


img中显示图片

img中引入图片




第二种:网上图片的链接:




(4) 标签(空格)



(5)em 标签表示斜体



(6)i 标签表示斜体



(7)br 表示换行



(8)b 标签表示加粗



(9) strong 标签表示加粗



(10)s 标签(删除线)




(11)u 标签 (下划线)



(12)font 颜色



(13)sub下标
(14)sup上标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>颜色渐变的文字</title>
<script language="javascript">
function Delta(sHex1,sHex2,iNum){
//计算每个字的变化量
var iHex1 = parseInt("0x"+sHex1);
var iHex2 = parseInt("0x"+sHex2);
return (iHex2 - iHex1)/(iNum-1);
}
function Colorful(sText,sColor1,sColor2){
if(sText.length<=1){
//如果只有一个字符,渐变无从谈起,直接输出并返回
document.write("<font style='color:#"+sColor1+";'>"+sText+"</font>");
return;
}
//RGB三色分离,分别获取变化的小量delta
var fDeltaR = Delta(sColor1.substring(0,2),sColor2.substring(0,2),sText.length);
var fDeltaG = Delta(sColor1.substring(2,4),sColor2.substring(2,4),sText.length);
var fDeltaB = Delta(sColor1.substring(4,6),sColor2.substring(4,6),sText.length);
var sColorR = parseInt("0x"+sColor1.substring(0,2));
var sColorG = parseInt("0x"+sColor1.substring(2,4));
var sColorB = parseInt("0x"+sColor1.substring(4,6));
for(var i=0;i<sText.length;i++){
document.write("<font style='color:rgb("+Math.round(sColorR)+","+Math.round(sColorG)+","+Math.round(sColorB)+");'>"+sText.substring(i,i+1)+"</font>");
/*每输出一个字符,颜色的三个分量都相应的变化
当字符输出完成时,正好由sColor1变成sColor2*/
sColorR += fDeltaR;
sColorG += fDeltaG;
sColorB += fDeltaB;
}
}
Colorful("春节(Spring Festival)中国民间最隆重最富有特色的传统节日,它标志农历旧的一年结束和新的一年的开始 。春节一般指除夕和正月初一 。但在民间,传统意义上的春节是指从腊月初八的腊祭或腊月二十三或二十四的祭灶,一直到正月十五,其中以除夕和正月初一为高潮。在春节期间,我国的汉族和很多少数民族都要举行各种活动以示庆祝。这些活动均以祭祀神佛、祭奠祖先、除旧布新、迎禧接福、祈求丰年为主要内容。活动丰富多彩,带有浓郁的民族特色。","FF3300","3366FF");
</script>
</head>
<body>
</body>
</html>

用时直接调用函数Colorful(),输入文字以及起始颜色和终止颜色值。