在Vue3中實現BPMN圖的動態著色

文由ScriptEcho平臺提供技術支持

項目地址：傳送門

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

應用場景

bpmn-js 是一個用于創建和編輯 BPMN 2.0 圖表的 JavaScript 庫。它廣泛應用于流程建模、業務流程管理和企業架構等領域。

基本功能

本代碼演示了如何在 bpmn-js 中使用顏色高亮元素。通過以下三種方式實現：

通過覆蓋層：在元素上添加一個覆蓋層，并設置其顏色。
通過 BPMN 2.0 擴展：使用 bpmn-js 提供的 API 設置元素的顏色。
通過標記和 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(),輸入文字以及起始顏色和終止顏色值。

在線咨詢

上一篇：JS遍歷數組
下一篇：如何在鴻蒙ArkTS中動態添加Tab內容？