bpmn-js 改造（三）给节点添加颜色，给边线加上滚动功能

不念不忘少年蓝@ 2023-01-07 11:29 902阅读 0赞

给节点添加颜色，其实给节点加颜色的方式比较多。我使用的比较粗暴的方式，直接使用jquery，加样式的方式

$("g[data-element-id='"+nodeId+"']").find(".djs-visual rect").css("fill",colors["not-pass-node"]["bgColor"]);

其实就是根据节点id找到相应显示rect 设置其中的颜色样式。

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]

给红色边框加上滚动效果；  
第一步：添加样式信息

@-webkit-keyframes test {
            to {
                stroke-dashoffset: 100%;
            }
        }
    
        .node-dy {
            -webkit-animation: test 18S linear infinite;
            -webkit-animation-fill-mode: forwards;
            /* stroke-dasharray: 4px ,4px; */
        }

第二步：设置节点的边框样式

$("g[data-element-id='"+nodeId+"']").find(".djs-visual rect")
           .css("fill",colors["current-node"]["bgColor"]).attr("stroke-dasharray","4,4").css("stroke","#DA5860");
         $("g[data-element-id='"+nodeId+"']").find(".djs-visual").addClass("node-dy");

关键代码：

attr("stroke-dasharray","4,4")
    addClass("node-dy")

打开浏览器看图，发现节点颜色变化了 而且边框一直打圈圈。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: /images/20221119/969948994b3444379e655f5ea5e4912a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，902人围观）

还没有评论，来说两句吧...

相关阅读

相关给app加上时间限制

NSDate senddate=[NSDate date]; NSCalendar cal=[NSCalendar currentCalend

末蓝、/ 2023年10月18日 13:32/ 0 赞/ 159 阅读

相关给div添加滚动条

<div style=" overflow-y:auto; overflow-x:auto; width:400p

野性酷女/ 2023年10月06日 17:30/ 0 赞/ 57 阅读

相关给网站加上雪花特效

> 如果你想给你的网站上加上的雪花特效，你可以这样做。 HTML代码在使用这个代码的时候，因为代码JS中用到了jquery语法。所以需要额外引入jquery。

缺乏、安全感/ 2023年09月29日 02:19/ 0 赞/ 14 阅读

相关给el-popover树形添加滚动框

<el-descriptions-item label="品牌--型号--描述" :span="3"> <el-popover placement

偏执的太偏执、/ 2023年09月28日 17:11/ 0 赞/ 3 阅读

相关 bpmn-js 改造（三）给节点添加颜色，给边线加上滚动功能

给节点添加颜色，其实给节点加颜色的方式比较多。我使用的比较粗暴的方式，直接使用jquery，加样式的方式 $("g[data-element-id='"+nodeId

不念不忘少年蓝@/ 2023年01月07日 11:29/ 0 赞/ 903 阅读

相关 android text加滚动条,Android开发15——给TextView加上滚动条

本文出自 “IT徐胖子的专栏” 博客，请务必保留此出处http://woshixy.blog.51cto.com/5637578/1086755给TextView加上滚动条非常

柔光的暖阳◎/ 2022年10月18日 01:43/ 0 赞/ 302 阅读

相关给div添加滚动条（转）

基础css知识： overflow-y:scroll; 总是显示纵向滚动条 overflow-y:visible : 不剪切内容也不添加纵向滚动条

Myth丶恋晨/ 2022年06月15日 11:14/ 0 赞/ 313 阅读

相关给Nim程序加上图标

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 首先，需要有Mingw；其次，需要有一个icon文件

骑猪看日落/ 2022年01月16日 03:28/ 0 赞/ 305 阅读

相关 vue-给div添加渐变颜色

vue-给div添加渐变颜色第一步：先写一个div并给它设置一个类名（class），我的这个div的类名为class=“www” ![在这里插入图片描述][201

我不是女神ヾ/ 2022年01月16日 02:25/ 0 赞/ 1322 阅读

相关给postmessage加上callback方法

postmessage双向通信中，是不能使用回调函数的。 window.postmessage({msg:'hello',callback:function(e){

小咪咪/ 2021年10月29日 07:50/ 0 赞/ 491 阅读