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

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

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

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

效果图：

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

  @-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")

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