用拓扑图实现多层级关系图（三）可折叠流程图

标签：

说到TWaver的流程图却是层出不穷，千姿百态。2D的，3D的，静态的，动态的。这次要给大家呈现的是一款全矢量的，非常清新优美的流程图。先给大家看看效果：

twaver.Util.registerImage('process', {
		w: 48,
		h: 42,
		lineWidth:1,
		lineColor: '#848484',
		v: [{
			shape: 'rect',
			w: 42,
			h: 36,
			x: -21,
			y: -18,
			r: 4,
			gradient: {
				type: 'linear',
				x1: 0,
				y1: -25,
				x2: 0,
				y2: 25,
				stop: [{
					offset: 0,
					color: 'white'
				},{
					offset: 0.4,
					color: '#D8D8D8'
				},{
					offset: 1,
					color: 'white'
				}]
			}
		}]
	});

{
			shape: 'rect',
			w: 36,
			h: 30,
			x: -18,
			y: -15,
			r: 3,
			gradient: {
				type: 'linear',
				x1: 0,
				y1: -20,
				x2: 0,
				y2: 25,
				stop: [{
					offset: 0,
					color: 'white'
				},{
					offset: 0.4,
					color: '#B45F04'
				},{
					offset: 1,
					color: 'white'
				}]
			}
		}

{
			shape: 'path',
			data: 'M-12,-8l4,0m2,0l12,0M-9,-3l4,0m2,0l12,0M-6,2l4,0m2,0l12,0M-9,7l4,0m2,0l12,0',
			lineWidth: 1.5,
			lineColor: '#F2F2F2',
		}

link.setStyle('icons.names', ['link_arrow']);

network.setLinkPathFunction(createLinkPath);

连线的走向我们这里采用了先水平后垂直的方式，也可以加上水平的偏移的值，这样我们可以控制连线的拐点。

http://v.youku.com/v_show/id_XOTQwODMzMjky.html?f=23725124

用拓扑图实现多层级关系图（三）可折叠流程图

标签：

原文地址：http://blog.csdn.net/twaver/article/details/45537181