HTML5实现的矢量卡片式组织结构图

标签：html5   矢量   组织结构图   布局   拓扑   

首先来看下整体效果。

先来一个经典的上下层级布局：

这些布局用twaver来实现是非常的合适，实现起来也是很容易，twaver内部就提供了多种布局方式：自左向右，从下向上，具体可以看twaver官方文档介绍，这里就不多说了。

今天我们着重说一下twaver如果实现上图中的网元。先放大看看效果：

这里借用了女神的范冰冰头像。我们假设范冰冰为财务部出纳，我想范爷做为财务部主管也是当之无愧的，从刚开始的北漂到后来的一夜狂赚8千万。现在的社会，只要有钱投资了房产后半辈子就不用愁了，闲话不多扯。这里我们采用的是名片式的方式来呈现组织图上的每个网元，左侧一张图片，右侧是职称，这种矢量和位图的结合效果也是非常赞的。那么这种网元如何来实现呢？首先我们需要定义一个圆角矩形:

twaver.Util.registerImage('employee', {
		w: 200,
		h: 135,
		cache: false,
		origin: {x:0, y:0},
		v: [{
			shape: 'rect',
			w: '100%',
			h: '100%',
			r: 8,
			lineColor:'black',
			lineWidth:2.5,
			fill: '#F5ECCE',
		}],
	});

{
			shape: 'text',
			text: '<%=getClient("text")%>',
			font: '12px "Microsoft Yahei"',
			translate: {x:150,y:135/2},
		}

{
			shape: 'path',
			data: 'M-45,-25Q-45,-64,0,-64Q45,-64,45,-25L45,25Q45,64,0,64Q-45,64,-45,25z',
			lineColor:'#BBBBBB',
			lineWidth:1,
			translate: {x: 60, y:135/2}
		}

twaver.Util.registerImage('clip_pic', {
		w: 128,
		h: 128,
		cache: false,
		clip: {
			shape: 'path',
			data: 'M-45,-25Q-45,-64,0,-64Q45,-64,45,-25L45,25Q45,64,0,64Q-45,64,-45,25z',
		},
		v: [{
			shape: 'image',
			x:-64,
			y:-64,
			name: '<%=getClient("pic")%>',
		}],
	});

html5-canvas-clipping-region-tutorial

canvas-clip-image-in-a-circle

想要具体demo的小伙伴，请发邮件至tw-service#servasoft.com，我们会将完整代码发送给您。

HTML5实现的矢量卡片式组织结构图

标签：html5   矢量   组织结构图   布局   拓扑   

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