组织结构图(Organization chart)是企业的流程运转、部门设置及职能规划等最基本的结构依据。和客户交流时,不少人都提到需要一个灵活的工具来绘制呈现企业的组织架构,今天就给大家带来一款用TWaver实现的组织结构图,提供多种布局方式,为了清晰呈现组织里每个人的职能,我们定制了名片样式来展示网元。
首先来看下整体的效果,是上下布局的样式:
也可以调整为圆形布局:
这些布局用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}, }
translate是将文字平移到指定的位置,这里我们需要放在右侧,因此需要设置偏右,x,y是相对于网元左上角原点来设置的。
接下来需要在左侧放置一个椭圆用于放组织节点的照片,这里的椭圆可以直接用path来描述 。
{ 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} }
data用于描述path的路径,这里面的M,Q,L分别代表moveto,quadraticCurveTo和lineto,比如M-45,就是移动到-45的位置上。具体的含义可以参考TWaver的官方文档。
接下来需要加上员工的图片,图片这里采用的是一般的位图,位图需要注册后才能使用。由于原始图片是方形的,需要裁减出圆角矩形的形状,说到裁减,twaver的矢量描述中支持clip,默认是不clip,设置clip之后,就会将超出矢量图片之外的区域的进行裁剪,可以用shape来描述裁减的区域,这里我们需要裁剪出圆角矩形,因此设置和上面矩形相同的path路径即可。
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")%>', }], });
关于clip的更多使用,可以参考下面的文档:
html5-canvas-clipping-region-tutorial
好了,一个组织结构图的网元就这样轻松实现。最后随机造一些数据可以看到整体效果了
想要具体demo的小伙伴,请发邮件至tw-service#servasoft.com,我们会将完整代码发送给您。
相关推荐
要实现上述示例中的名片式组织结构图,我们首先需要定义一个圆角矩形作为网元的基础形状。这可以通过使用TWaver的`registerImage`方法并指定相应的参数来完成,例如设置宽度、高度、边框颜色和填充色。接着,我们...
在IT行业中,HTML5模板是开发网页的一种便捷方式,它为设计者和开发者提供了一个预设的布局结构和样式,可以快速构建具有现代特性的个人名片网页。"个人名片HTML5模板"通常包括一系列预设计的CSS样式、JavaScript...
5. **易用性与可访问性**:考虑到不同用户的使用习惯和需求,模板应遵循WCAG(Web Content Accessibility Guidelines)标准,提供足够的对比度、清晰的导航结构以及无障碍功能支持,如屏幕阅读器兼容性。 6. **代码...
名片管理系统静态页面是一种基于Web的用户界面,用于管理和组织个人或企业名片信息。在这个项目中,我们关注的是前端部分,即用户可以看到和交互的网页。虽然这个系统没有提及后端功能,如数据库存储和服务器逻辑,...
【标题】"前端设计师web简历html模板下载_黑色个人简历web简历窄动画html5网上名片.rar" 提供的是一款专为前端设计师设计的HTML简历模板,适用于创建具有现代感和专业性的在线个人简历。这款模板采用了黑色为主色调...
这是一个关于名片印刷行业的企业网站模板,设计风格以简洁和大气为主,旨在为商业企业提供专业的在线形象展示。模板中包含了各种元素,如幻灯片、菜单、名片和宣传册的设计,充分考虑了品牌形象的统一性和用户体验的...
1. **布局设计**:模板可能采用了网格系统来组织内容,使名片内容排列整齐,易于阅读。响应式布局意味着它会根据屏幕尺寸自动调整,无论是桌面电脑、平板还是手机,用户都能获得一致的浏览体验。 2. **色彩搭配**:...
在HTML5中,可以使用`<figure>`和`<figcaption>`元素来组织图片和相关描述,提供良好的语义结构。 3. "more_info.png":这可能是获取更多信息的按钮,可能通过链接到其他页面或弹出层提供详细的设计作品介绍。 4. ...
这些文件结构化的组织方式,使得网站开发和维护更加高效。 README.md文件通常是项目介绍和使用指南,包含了如何安装和自定义模板的步骤。对于不熟悉前端开发的用户,这是一个非常宝贵的资源。 总结来说,这个...
【个人名片滑动切换模板】是一款专为个人网站设计的页面模板,主要基于HTML技术,适用于展示个人简介、作品集或者服务项目等。这个模板的特点是通过滑动切换的方式,使得用户可以方便地浏览和了解内容,提高了用户...
1. 数据库设计:如何创建适合名片管理的数据库结构,包括字段选择、数据类型设定、键的定义等,确保数据的有效性和完整性。 2. 用户界面设计:VF提供了一套可视化工具,可以方便地设计出直观易用的用户界面,包括...
这款名为“个性小屏人物简介网站模板”的html小屏团队名片网站模板,是专为适应小屏幕设备设计的,如手机或平板电脑。它旨在帮助个人或团队在有限的屏幕上展示自我或团队介绍,保持良好的用户体验。以下是这个模板中...
【企业名片微信小程序前端源码】是一个专为提升小门店客户曝光率而设计的微信小程序应用。这款小程序的源码提供了完整的前端开发资源,让开发者能够根据自身需求进行定制和优化,以更好地适应企业的品牌特色和服务...
"名片印刷企业css模板"是专门为这类企业设计的一种网页样式框架,旨在提供专业、美观且功能齐全的网站布局。这种模板通常包含了丰富的设计元素,如色彩搭配、字体样式、图像处理以及交互效果,以吸引潜在客户并展示...
1. **头部(Head)**:包含元信息,如页面标题、字符编码声明以及引用的CSS和JavaScript文件。 2. **主体(Body)**:展示页面内容的区域,包括个人信息、教育背景、工作经验、技能列表等。 3. **段落(Paragraphs)...
在名片设计印刷公司的网站中,HTML5可以帮助清晰地组织内容,如作品展示、服务介绍和联系页面。 CSS3则是负责网页样式的语言,允许开发者通过定义颜色、字体、布局等实现复杂的视觉效果。CSS3引入了新的选择器、...
【个人网站html模板】是一种利用HTML5技术设计的网页布局方案,主要用于创建具有现代感、交互性强的个人网站。HTML5是超文本标记语言(HTML)的最新版本,它引入了许多新的元素、属性和API,旨在提升网页的用户体验...
这些文件通常按照结构组织,如HTML文件负责页面结构,CSS文件控制样式,而JavaScript文件则处理交互效果和动态功能。 总结来说,"名片设计印刷公司商务整站模板5351.zip" 是一个适用于名片设计和印刷公司的网站模板...
HTML是一种标记语言,它是网页设计的基础,用于构建和呈现网页内容。...通过学习和理解这个模板,你可以了解如何有效地组织HTML结构,应用CSS样式,以及利用JavaScript增强交互性,从而提升你的网页设计技能。