码迷，mamicode.com
首页 > 其他好文 > 详细

activit相关颜色配置

时间：2017-04-06 13:45:48      阅读：229      评论：0      收藏：0      [点我收藏+]

标签：r.js   tom   4.6   相关   sha   proc   horizon   attr   roc   

一，修改默认设计图颜色

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相关颜色配置

标签：r.js   tom   4.6   相关   sha   proc   horizon   attr   roc   

原文地址：http://www.cnblogs.com/qiuxnlin/p/6673061.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！