html5 拓扑图切片,HTML5复杂拓扑图（四）组织结构图

TWaver 阅读(5040) 评论(1) 编辑收藏

应广大客户所需，今天给大家带来一款组织结构图。组织结构图的呈现方式多种多样，用途也是非常广泛，可以应用于集团内部，企业各部门之间的组织关系呈现。我们就来看看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%',

html5 拓扑图切片,HTML5复杂拓扑图（四）组织结构图相关推荐

HTML5 2D游戏引擎研发系列第四章 Canvas技术篇-画布技术-基于手动切片动画
作者:HTML5游戏开发者社区-白泽转载请注明出处:http://html5gamedev.or HTML5 2D游戏引擎研发系列第四章 <Canvas技术篇-画布技术-基于手动切片动画&g ...
html5拓扑图图入门,如何使用HTML5 Canvas动态的绘制拓扑图
如何使用HTML5 Canvas动态的绘制拓扑图使用HTML5 Canvas动态的绘制拓扑图: HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( ...
vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
html5 drag this,HTML5拖放(drag和drog)
拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就 ...
【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
文章目录页面展示技术要点代码实现 html代码 CSS代码用到的图片页面展示本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...
php识别html5,CSS_在IE6/7/8下识别html5标签(让老式浏览器识别html5)，识别html5标签： html5添加了许 - phpStudy...
在IE6/7/8下识别html5标签(让老式浏览器识别html5) 识别html5标签: html5添加了许多语义化的标签,比如,,什么的,当时看到这些标签的时候心想html5估计很多老式IE浏览器都 ...
html5知识点：HTML5新特性
最近几年web前端开发领域最热的话题当属HTML5,HTML5从根本上改变了开发商开发web应用的方式,从桌面浏览器到移动应用,这种语言和标准都正在影响并将继续影响着各种操作平台. 关于HTML5的介 ...
html语义化的理解是什么,html5语义化,html5的语义化的理解
家里有个熊孩子,经常会有一些意想不到的事情发生:回家的时候,他会笑呵呵冲过来,大声喊着臭爸爸;你让他把鞋穿上,他会提起鞋子往楼下扔在小孩的世界里,他虽然会说话,但不一定明白其中的意思,不能正确表达;同 ...
html5使用阴影,HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = "red" 表示设置阴影颜色为红色 ...

html5 拓扑图切片,HTML5复杂拓扑图（四）组织结构图

html5 拓扑图切片,HTML5复杂拓扑图（四）组织结构图相关推荐

最新文章

热门文章

html5 拓扑图 切片,HTML5复杂拓扑图（四） 组织结构图

html5 拓扑图 切片,HTML5复杂拓扑图（四） 组织结构图相关推荐

最新文章

热门文章

html5 拓扑图切片,HTML5复杂拓扑图（四）组织结构图

html5 拓扑图切片,HTML5复杂拓扑图（四）组织结构图相关推荐