`

HTML5组织结构图之名片式网元布局

阅读更多

组织结构图(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 

canvas-clip-image-in-a-circle

 


好了,一个组织结构图的网元就这样轻松实现。最后随机造一些数据可以看到整体效果了



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

 

分享到:
评论

相关推荐

    专题资料(2021-2022年)HTML5实现的矢量卡片式组织结构图.doc

    要实现上述示例中的名片式组织结构图,我们首先需要定义一个圆角矩形作为网元的基础形状。这可以通过使用TWaver的`registerImage`方法并指定相应的参数来完成,例如设置宽度、高度、边框颜色和填充色。接着,我们...

    个人名片HTML5模板

    在IT行业中,HTML5模板是开发网页的一种便捷方式,它为设计者和开发者提供了一个预设的布局结构和样式,可以快速构建具有现代特性的个人名片网页。"个人名片HTML5模板"通常包括一系列预设计的CSS样式、JavaScript...

    小屏团队名片HTML模板

    5. **易用性与可访问性**:考虑到不同用户的使用习惯和需求,模板应遵循WCAG(Web Content Accessibility Guidelines)标准,提供足够的对比度、清晰的导航结构以及无障碍功能支持,如屏幕阅读器兼容性。 6. **代码...

    名片管理系统静态页面

    名片管理系统静态页面是一种基于Web的用户界面,用于管理和组织个人或企业名片信息。在这个项目中,我们关注的是前端部分,即用户可以看到和交互的网页。虽然这个系统没有提及后端功能,如数据库存储和服务器逻辑,...

    前端设计师web简历html模板下载_黑色个人简历web简历窄动画html5网上名片.rar

    【标题】"前端设计师web简历html模板下载_黑色个人简历web简历窄动画html5网上名片.rar" 提供的是一款专为前端设计师设计的HTML简历模板,适用于创建具有现代感和专业性的在线个人简历。这款模板采用了黑色为主色调...

    简洁大气的名片印刷行业企业模板_简洁 大气 名片 印刷 商业 企业 大图 幻灯 菜单 名片 宣传册 html 整站_h.rar

    这是一个关于名片印刷行业的企业网站模板,设计风格以简洁和大气为主,旨在为商业企业提供专业的在线形象展示。模板中包含了各种元素,如幻灯片、菜单、名片和宣传册的设计,充分考虑了品牌形象的统一性和用户体验的...

    个人电子名片css模板

    1. **布局设计**:模板可能采用了网格系统来组织内容,使名片内容排列整齐,易于阅读。响应式布局意味着它会根据屏幕尺寸自动调整,无论是桌面电脑、平板还是手机,用户都能获得一致的浏览体验。 2. **色彩搭配**:...

    平面设计师个人案例展示html5模板_纹理平面设计设计师个人画册名片案例展示企业工作室整站html5.rar

    在HTML5中,可以使用`<figure>`和`<figcaption>`元素来组织图片和相关描述,提供良好的语义结构。 3. "more_info.png":这可能是获取更多信息的按钮,可能通过链接到其他页面或弹出层提供详细的设计作品介绍。 4. ...

    简洁大气的名片印刷行业企业模板-简洁 大气 名片 印刷 商业 企业 大图 幻灯 菜单 名片 宣传册 html 整站.rar

    这些文件结构化的组织方式,使得网站开发和维护更加高效。 README.md文件通常是项目介绍和使用指南,包含了如何安装和自定义模板的步骤。对于不熟悉前端开发的用户,这是一个非常宝贵的资源。 总结来说,这个...

    个人名片滑动切换模板是一款适合做个人网站介绍页面的网站模板.rar

    【个人名片滑动切换模板】是一款专为个人网站设计的页面模板,主要基于HTML技术,适用于展示个人简介、作品集或者服务项目等。这个模板的特点是通过滑动切换的方式,使得用户可以方便地浏览和了解内容,提高了用户...

    VF名片管理系统论文

    1. 数据库设计:如何创建适合名片管理的数据库结构,包括字段选择、数据类型设定、键的定义等,确保数据的有效性和完整性。 2. 用户界面设计:VF提供了一套可视化工具,可以方便地设计出直观易用的用户界面,包括...

    个性小屏人物简介网站模板是一款html小屏团队名片网站模板.rar

    这款名为“个性小屏人物简介网站模板”的html小屏团队名片网站模板,是专为适应小屏幕设备设计的,如手机或平板电脑。它旨在帮助个人或团队在有限的屏幕上展示自我或团队介绍,保持良好的用户体验。以下是这个模板中...

    企业名片微信小程序前端源码

    【企业名片微信小程序前端源码】是一个专为提升小门店客户曝光率而设计的微信小程序应用。这款小程序的源码提供了完整的前端开发资源,让开发者能够根据自身需求进行定制和优化,以更好地适应企业的品牌特色和服务...

    名片印刷企业css模板

    "名片印刷企业css模板"是专门为这类企业设计的一种网页样式框架,旨在提供专业、美观且功能齐全的网站布局。这种模板通常包含了丰富的设计元素,如色彩搭配、字体样式、图像处理以及交互效果,以吸引潜在客户并展示...

    35个静态HTML个人简历模板

    1. **头部(Head)**:包含元信息,如页面标题、字符编码声明以及引用的CSS和JavaScript文件。 2. **主体(Body)**:展示页面内容的区域,包括个人信息、教育背景、工作经验、技能列表等。 3. **段落(Paragraphs)...

    网站设计模板-名片设计印刷公司商务整站模板.zip

    在名片设计印刷公司的网站中,HTML5可以帮助清晰地组织内容,如作品展示、服务介绍和联系页面。 CSS3则是负责网页样式的语言,允许开发者通过定义颜色、字体、布局等实现复杂的视觉效果。CSS3引入了新的选择器、...

    个人网站html模板

    【个人网站html模板】是一种利用HTML5技术设计的网页布局方案,主要用于创建具有现代感、交互性强的个人网站。HTML5是超文本标记语言(HTML)的最新版本,它引入了许多新的元素、属性和API,旨在提升网页的用户体验...

    名片设计印刷公司商务整站模板5351.zip

    这些文件通常按照结构组织,如HTML文件负责页面结构,CSS文件控制样式,而JavaScript文件则处理交互效果和动态功能。 总结来说,"名片设计印刷公司商务整站模板5351.zip" 是一个适用于名片设计和印刷公司的网站模板...

    HTML 做的个人模板

    HTML是一种标记语言,它是网页设计的基础,用于构建和呈现网页内容。...通过学习和理解这个模板,你可以了解如何有效地组织HTML结构,应用CSS样式,以及利用JavaScript增强交互性,从而提升你的网页设计技能。

Global site tag (gtag.js) - Google Analytics