activit相关颜色配置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了activit相关颜色配置相关的知识，希望对你有一定的参考价值。
一，修改默认设计图颜色
activiti-explorer.war（版本：5.16.4）中，ACTIVITI提供图像查看模块diagram-viewer，这个模块可以以REST的方式获取数据，然后显示流程进行状况，但是默认的TASK是米黄色，和很多网站色调不搭，只有通过修改来改变颜色，现在修改成白色背景，可以适应各种网站：
1，修改JS脚本
修改diagram-viewer使用的JS脚本中的ProcessDiagramCanvas.js，这个是主要的绘制脚本，设置TASK颜色的是其中一段代码
var attr =
{"stroke-width": this.strokeWidth, stroke: TASK_STROKE_COLOR, fill: this.getPaint()};
找到代码地点，
修改前：
_drawTask: function(name, x, y, width, height, thickBorder) {
var originalPaint = this.getPaint();
this.setPaint(TASK_COLOR);
// anti smoothing
if (this.strokeWidth%2 == 1)
x = Math.round(x) + .5, y = Math.round(y) + .5;
// shape
var shape = this.g.rect(x, y, width, height, TASK_CORNER_ROUND);
//fill: this.getPaint()就是TASK填充色，默认是取的一个渐变色，就是黄色，可以改成任意颜色
var attr =
{"stroke-width": this.strokeWidth, stroke: TASK_STROKE_COLOR, fill: this.getPaint()};
shape.attr(attr);
//shape.attr({fill: "90-"+this.getPaint()+"-" + Color.get(250, 250, 244)});
var contextObject = this.getConextObject();
if (contextObject) {
shape.id = contextObject.id;
shape.data("contextObject", contextObject);
}
修改后：
//fill: this.getPaint()就是TASK填充色，
//默认是取的一个渐变色，就是黄色，可以改成任意颜色，
//ACT所有引用的颜色都在Color.js里面，
//Color.Snow是白色，图示用了一个红色
var attr =
{"stroke-width": this.strokeWidth, stroke: TASK_STROKE_COLOR, fill: Color.Snow};
你可以修改成任何颜色，以便和你的网站或者系统匹配。
二，修改图像设计器MOLDER的颜色
activiti-explorer.war（版本：5.16.4）中，editor文件夹，就是流程设计器activiti modeler，有心的作者使用了一种矢量工具来设置流程图样式，所以需要改变样式，直接改变矢量图svg就可以了，关于svg有很多设计软件，嵌入程序也可以做成在线样式设计，但是这里使用修改源码快速实现TASK背景颜色改变。
依次打开文件夹：activiti-5.16.4\wars\activiti-explorer\editor\stencilsets\bpmn2.0\view\activity，找到usertask.svg，这是一种使用程序语言描述的矢量图，文件内容：
改变前：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:oryx="http://www.b3mn.org/oryx"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="102"
height="82"
version="1.0">
<defs></defs>
<oryx:magnets>
<oryx:magnet oryx:cx="1" oryx:cy="20" oryx:anchors="left" />
<oryx:magnet oryx:cx="1" oryx:cy="40" oryx:anchors="left" />
<oryx:magnet oryx:cx="1" oryx:cy="60" oryx:anchors="left" />
<oryx:magnet oryx:cx="25" oryx:cy="79" oryx:anchors="bottom" />
<oryx:magnet oryx:cx="50" oryx:cy="79" oryx:anchors="bottom" />
<oryx:magnet oryx:cx="75" oryx:cy="79" oryx:anchors="bottom" />
<oryx:magnet oryx:cx="99" oryx:cy="20" oryx:anchors="right" />
<oryx:magnet oryx:cx="99" oryx:cy="40" oryx:anchors="right" />
<oryx:magnet oryx:cx="99" oryx:cy="60" oryx:anchors="right" />
<oryx:magnet oryx:cx="25" oryx:cy="1" oryx:anchors="top" />
<oryx:magnet oryx:cx="50" oryx:cy="1" oryx:anchors="top" />
<oryx:magnet oryx:cx="75" oryx:cy="1" oryx:anchors="top" />
<oryx:magnet oryx:cx="50" oryx:cy="40" oryx:default="yes" />
</oryx:magnets>
<g pointer-events="fill" oryx:minimumSize="50 40">
<defs>
//渐变设置，TASK中背景是一种白黄渐变，是在这里设置的，改变stop-color="#ffffcc"，去掉stop-opa //city="1"，就可以实现颜色改变
<radialGradient id="background" cx="10%" cy="10%" r="100%" fx="10%" fy="10%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
<stop id="fill_el" offset="100%" stop-color="#ffffcc" stop-opacity="1"/>
</radialGradient>
</defs>
<rect id="text_frame" oryx:anchors="bottom top right left" x="1" y="1" width="94" height="79" rx="10" ry="10" stroke="none" stroke-width="0" fill="none" />
//方块颜色填充：fill="url(#background) #ffffcc"，url(#background) 是上面定义的渐变色
<rect id="bg_frame" oryx:resize="vertical horizontal" x="0" y="0" width="100" height="80" rx="10" ry="10" stroke="black" stroke-width="1" fill="url(#background) #ffffcc" />
<text
font-size="12"
id="text_name"
x="50"
y="40"
oryx:align="middle center"
oryx:fittoelem="text_frame"
stroke="black">
</text>
<g id="userTask" transform="scale(0.7,0.7) translate(8,8)">
<path oryx:anchors="top left" style="opacity:1;fill:#F4F6F7;stroke:#000000"
d="M0.585,24.167h24.083v-7.833c0,0-2.333-3.917-7.083-5.167h-9.25
c-4.417,1.333-7.833,5.75-7.833,5.75L0.585,24.167z"/>
<path oryx:anchors="top left" style="opacity:1;fill:none;stroke:#000000" d="M 6 20 L 6 24" />
<path oryx:anchors="top left" style="opacity:1;fill:none;stroke:#000000" d="M 20 20 L 20 24" />
<circle oryx:anchors="top left" fill="#000000" stroke="#000000" cx="13.002" cy="5.916" r="5.417"/>
<path oryx:anchors="top left" style="opacity:1;fill:#F0EFF0;stroke:#000000"
d="M8.043,7.083c0,0,2.814-2.426,5.376-1.807s4.624-0.693,4.624-0.693
c0.25,1.688,0.042,3.75-1.458,5.584c0,0,1.083,0.75,1.083,1.5s0.125,1.875-1,3s-5.5,1.25-6.75,0S8.668,12.834,8.668,12
s0.583-1.25,1.25-1.917C8.835,9.5,7.419,7.708,8.043,7.083z"/>
</g>
<g
id="loop">
<path
oryx:anchors="bottom"
style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2.0999999;stroke-dasharray:none;stroke-opacity:1"
id="path2396"
d="M 47.608384,75.188343 L 47.608384,78.188343 L 44.608384,78.188343 M 47.608384,78.188343 A 4.875,4.875 0 1 1 51.639336,78.189378"
/>
</g>
<g id="parallel">
<path oryx:anchors="bottom" fill="none" stroke="black" d="M46 70 v8 M50 70 v8 M54 70 v8" stroke-width="2" />
</g>
<g id="sequential">
<path oryx:anchors="bottom" fill="none" stroke="#000000" stroke-width="2" d="M46,76h10M46,72h10 M46,68h10"/>
</g>
<g id="compensation">
<path oryx:anchors="bottom" fill="none" stroke="black" d="M 62 74 L 66 70 L 66 78 L 62 74 L 62 70 L 58 74 L 62 78 L 62 74" stroke-width="1" />
</g>
</g>
</svg>
改变后：（关键是radialGradient设置）
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:oryx="http://www.b3mn.org/oryx"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="102"
height="82"
version="1.0">
<defs></defs>
<oryx:magnets>
<oryx:magnet oryx:cx="1" oryx:cy="20" oryx:anchors="left" />
<oryx:magnet oryx:cx="1" oryx:cy="40" oryx:anchors="left" />
<oryx:magnet oryx:cx="1" oryx:cy="60" oryx:anchors="left" />
<oryx:magnet oryx:cx="25" oryx:cy="79" oryx:anchors="bottom" />
<oryx:magnet oryx:cx="50" oryx:cy="79" oryx:anchors="bottom" />
<oryx:magnet oryx:cx="75" oryx:cy="79" oryx:anchors="bottom" />
<oryx:magnet oryx:cx="99" oryx:cy="20" oryx:anchors="right" />
<oryx:magnet oryx:cx="99" oryx:cy="40" oryx:anchors="right" />
<oryx:magnet oryx:cx="99" oryx:cy="60" oryx:anchors="right" />
<oryx:magnet oryx:cx="25" oryx:cy="1" oryx:anchors="top" />
<oryx:magnet oryx:cx="50" oryx:cy="1" oryx:anchors="top" />
<oryx:magnet oryx:cx="75" oryx:cy="1" oryx:anchors="top" />
<oryx:magnet oryx:cx="50" oryx:cy="40" oryx:default="yes" />
</oryx:magnets>
<g pointer-events="fill" oryx:minimumSize="50 40">
<defs>
//渐变设置，TASK中背景是一种白黄渐变，是在这里设置的，改变stop-color="#ffffcc"，去掉stop-opa //city="1"，就可以实现颜色改变
<radialGradient id="background" cx="10%" cy="10%" r="100%" fx="10%" fy="10%">
<stop offset="0%" stop-color="#ffffff" />
<stop id="fill_el" offset="100%" stop-color="#B0E2FF" />
</radialGradient>
</defs>
<rect id="text_frame" oryx:anchors="bottom top right left" x="1" y="1" width="94" height="79" rx="10" ry="10" stroke="none" stroke-width="0" fill="none" />
//方块颜色填充：fill="url(#background) #ffffcc"，url(#background) 是上面定义的渐变色
<rect id="bg_frame" oryx:resize="vertical horizontal" x="0" y="0" width="100" height="80" rx="10" ry="10" stroke="black" stroke-width="1" fill="url(#background) #B0E2FF" />
<text
font-size="12"
id="text_name"
x="50"
y="40"
oryx:align="middle center"
oryx:fittoelem="text_frame"
stroke="black">
</text>
<g id="userTask" transform="scale(0.7,0.7) translate(8,8)">
<path oryx:anchors="top left" style="opacity:1;fill:#F4F6F7;stroke:#000000"
d="M0.585,24.167h24.083v-7.833c0,0-2.333-3.917-7.083-5.167h-9.25
c-4.417,1.333-7.833,5.75-7.833,5.75L0.585,24.167z"/>
<path oryx:anchors="top left" style="opacity:1;fill:none;stroke:#000000" d="M 6 20 L 6 24" />
<path oryx:anchors="top left" style="opacity:1;fill:none;stroke:#000000" d="M 20 20 L 20 24" />
<circle oryx:anchors="top left" fill="#000000" stroke="#000000" cx="13.002" cy="5.916" r="5.417"/>
<path oryx:anchors="top left" style="opacity:1;fill:#F0EFF0;stroke:#000000"
d="M8.043,7.083c0,0,2.814-2.426,5.376-1.807s4.624-0.693,4.624-0.693
c0.25,1.688,0.042,3.75-1.458,5.584c0,0,1.083,0.75,1.083,1.5s0.125,1.875-1,3s-5.5,1.25-6.75,0S8.668,12.834,8.668,12
s0.583-1.25,1.25-1.917C8.835,9.5,7.419,7.708,8.043,7.083z"/>
</g>
<g
id="loop">
<path
oryx:anchors="bottom"
style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2.0999999;stroke-dasharray:none;stroke-opacity:1"
id="path2396"
d="M 47.608384,75.188343 L 47.608384,78.188343 L 44.608384,78.188343 M 47.608384,78.188343 A 4.875,4.875 0 1 1 51.639336,78.189378"
/>
</g>
<g id="parallel">
<path oryx:anchors="bottom" fill="none" stroke="black" d="M46 70 v8 M50 70 v8 M54 70 v8" stroke-width="2" />
</g>
<g id="sequential">
<path oryx:anchors="bottom" fill="none" stroke="#000000" stroke-width="2" d="M46,76h10M46,72h10 M46,68h10"/>
</g>
<g id="compensation">
<path oryx:anchors="bottom" fill="none" stroke="black" d="M 62 74 L 66 70 L 66 78 L 62 74 L 62 70 L 58 74 L 62 78 L 62 74" stroke-width="1" />
</g>
</g>
</svg>
改变后就成了蓝白渐变。
以上是关于activit相关颜色配置的主要内容，如果未能解决你的问题，请参考以下文章