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>

改变后就成了蓝白渐变。

时间： 2024-11-07 00:42:08

activit相关颜色配置的相关文章

MyEclipse使用技巧（包括使用快捷键，智能提示，颜色配置，svn搭建，优化配置等） (转的)

转自:http://blog.163.com/magicc_love/blog/static/185853662201111101210847/ 1.安装 2.注册 3.配置 window ----> preferences (1)配置 JDK java--->Installed JREs --> Add ---> JRE name ---> JRE home directory ---> <ok> (2)配置字符编码 General --> Work

Linux下shell颜色配置

颜色配置涉及以下几个地方(本人常用的):命令提示符,文件及目录名显示,echo -e命令 1.颜色值分为前景色和背景色,颜色码值对应关系如下: Front Back Color 30 40 黑 31 41 红 32 42 绿 33 43 黄(棕) 34 44 蓝 35 45 紫 36 46 青 37 47 白 2.颜色设置格式 (1) echo命令使用 "\033[F;Bmstring\033[0m"    F和B分别表示前景和背景颜色的码值 echo -e "\033[32

6.Maven聚合和继承，相关案例配置

 1有时候一个项目中有很多个模块,要想各个模块之间影响较小,可以将每个模块拿出来作为一个项目模块,对每个项目模块进行独立的开发. 2在这些过程中会遇到关于聚合和继承的问题. 3何为聚合? A如果我们想一次构建多个项目模块,那我们就需要对多个项目模块进行聚合,也就是说当我们点击一个pom的时候,同时运行多个项目模块.这时候要用到以下的标签,将各个项目模块整合在一起. <modules> <module>-</module> </modules> 4何为继承

手机版web相关meta配置

若页面需默认用ie兼容内核,增加标签: 若页面需默认用ie标准内核,增加标签: --> 页面标题 手机版web相关meta配置,布布扣,bubuko.com

Nginx相关基础配置详解

一.I/O类型及与其相关概念: 1.1同步和异步:synchronous, asynchronous  [关注的是消息通知机制] 同步:调用发出不会立即返回,但一旦返回就可以返回最终结果: 异步:调用发出之后,被调用方立即返回消息,但返回的非最终结果:被调用者通过状态.通知机制来通知调者,或通过回调函数来处理结果: 1.2阻塞和非阻塞:block, nonblock[关注的是调用等等调用结果(消息.返回值)时的状态] 阻塞:调用结果返回之前,调用者(调用线程)会被挂起:调用者只有在得到结果之后才

linux mint系统下编程相关环境配置

学习web开发,用到linux系统,在师兄的帮助下还算不是很费劲的把一些环境配置好了. 清单: skype ibus Google Chrome open-jdk-7.0 android-sdk ant github node.js rvm rvm.ruby rvm.rails yeoman RubyMine IntelliJ IDEA 注意:以下的命令行都是一行一行的在终端中执行 1. skype 和Chrome 在软件管理器中搜索skype,第一个,skype,点击安装. chrome 到h

Centos7.X自带的防火墙和服务的相关的配置

centos7.0版本之后相对于以前的版本更改行还是很大的,原先在6.5版本之前命令和配置文件大致都差不多,自7.0版本之后一些功能都有较大的改变,接下来会从防火墙和服务的相关配置来进行剖析. (一)防火墙firewall的相关介绍及配置 CentOS 7中防火墙是一个非常的强大的功能,在CentOS 6.5中在iptables防火墙中进行了升级了.(he dynamic firewall daemon firewalld provides a dynamically managed firew

一个ios工程相关的配置小问题解决介绍,gdata xml解析相关

在我们ios的开发中gdataxml是一个常用的开源实现,很多第三方的库在实现里也会加入它的源码.我们在使用此类库或者直接使用gdataxml库时,切记要在工程中引入libxml2这个框架,否则编译会报错,提示类似下面: Undefined symbols for architecture armv7: "_xmlDocDumpMemory", referenced from: xxx 引入该框架问题即可解决. 一个ios工程相关的配置小问题解决介绍,gdata xml解析相关,码迷,

Ubuntu终端中字体颜色配置

默认: 蓝色代表目录: 绿色代表可执行文件: 红色表示压缩文件: 浅蓝色表示链接文件: 灰色表示其他文件: 红色闪烁表示链接的文件有问题了 黄色表示设备文件. 很不爽怎么办,改! 其实呢,使用dircolor命令就可以显示文件名颜色设置了(dircolor -p)(它还可以设置). 关于如何修改,同样找到下面一篇文章: 1. 利用dircolors命令,查看我们的系统当前的文件名称显示颜色的值,然后利用管道重定向到用户目录下的任意一个文件(这里我们创建了一个.dir_colors文件) 命令1: