文档章节

html5实现流程图

霄羽
 霄羽
发布于 2015/08/05 14:24
字数 694
阅读 290
收藏 0

以前在IE盛行,微软一家独大的时候,web绘图功能首选就是VML,IE5.0以上的版本都支持VML,VML可以在IE中通过文本的方式绘制矢量图像,类似在html页面中实现了画笔的功能,所以被很多人采用来实现web流程设计器。

随着手机,ipad等各种移动设备的升级,越来越多的应用要求支持这些移动设备。很可惜VML只支持IE,手机和ipad大部分是chrome和safari,不支持VML,web绘制流程图的功能,要实现跨浏览器,必须采用别的技术。

svg是Scapable Vector Graphics,可缩放的矢量图像,是互联网联盟W3C推荐的标准,符合XML节点的规则,用XML来描述二维图像的语言。和VML类似,都是用文本来描述二维图像的语言,并且SVG是W3C的标准,几乎所有浏览器都支持,但是IE5-IE8又有特殊了,需要下载adobe的SVGView插件才能查看。

为了兼容已经用VML做好的绘图功能,并且兼容用IE的客户,所以我们在实现web流程设计器的绘图功能时,需要根据浏览器来切换,当IE浏览器时,我们用VML来绘图,当其他浏览器时,用SVG来绘图,做到自动切换,让用户感觉不到不同,这是最好的。

VML和SVG的区别:
VML的优点:
XML标准,文本标记,表示方法简单。
高质量的矢量图像,支持多种不同的矢量图形元素:
 Shape 
 Line 
 Polyline
 Path
 Curve 
 Rect
 Roundrect
 Group
 Oval
 Arc
可以方便的嵌入html文件。
兼容DHTML的大部分属性和事件。如,id,title,onmouseover等等,还可以自定义属性。

支持动画和交互

SVG支持任意的几何图形,渐变色,滤镜,动画等。并且,VML有的那些有点,SVG也有,如
基于XML标准
高质量的矢量图像
文本描述的二维图像
另外,SVG比VML还有一些优点
灵活的文件格式
支持交互和动画
支持字符查找
支持Xlink和Xpointer


利用VML和SVG的相同和不同,我们在绘制流程图的时候,根据浏览器的不同,切换到不同的技术。如IE中,我们用VML来划线:


同一个流程,Safari中绘制的流程图:

 

线条的粗细稍有不同,位置形状完全一致,自动切换,终端用户使用中感觉不到差异。

标签: web开发平台java工作流流程设计器自定义工作流web工作流自定义表单工作流引擎.net工作流


本文转载自:http://www.cnblogs.com/webreport/archive/2012/10/29/2744337.html

霄羽
粉丝 0
博文 14
码字总数 1468
作品 0
昌平
私信 提问
流程图的开发

精通HTML5、CSS3、JavaScript,Jquery,Bootstrap。需要满足本需求所述能力要求的高级开发工程师驻场工作,按我方要求完成相关任务。 【工作职责】 1、开发流程图,能实现与后台的数据交换。...

microsu
2016/10/27
46
5
为程序员和设计师准备的10个流程图

流程图是一样很有用的工具。它可以用来帮助你做决策,给你一步一步的引导。对于很多复杂的设计和流程来说,流程图是必不可少的。和其他图形一样,流程图让你直观的理解一个流程,甚至有可能帮...

虫虫
2012/02/14
20.1K
27
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
651
1
分享6个实用的HTML5本地存储(Local Storage)教程

日期:2011/12/12 来源:GBin1.com HTML5 中最强大并且最具有魅力的特性在于本地存储,使用本地存储可以大大的节约服务器端的压力,并且可以有效的利用客户端的计算性能。使用HTML5可以在客户...

gbin1
2011/12/12
2.9K
1
详解javascript拖拽(一)基础介绍

人类喜欢将工作或活动步骤化:第一步、第二步、第三步等,因为分解让人类得以分工并优化局部。 一个作家构思一部鸿篇巨制,必然要考虑将内容划分为几个部分,每个部分刻画相应的人物背景故事....

AndyLaw
2018/12/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PostgreSQL 11.3 locking

rudi
今天
5
0
Mybatis Plus sql注入器

一、继承AbstractMethod /** * @author beth * @data 2019-10-23 20:39 */public class DeleteAllMethod extends AbstractMethod { @Override public MappedStatement injectMap......

一个yuanbeth
今天
10
1
一次写shell脚本的经历记录——特殊字符惹的祸

本文首发于微信公众号“我的小碗汤”,扫码文末二维码即可关注,欢迎一起交流! redis在容器化的过程中,涉及到纵向扩pod实例cpu、内存以及redis实例的maxmemory值,statefulset管理的pod需要...

码农实战
今天
4
0
为什么阿里巴巴Java开发手册中不建议在循环体中使用+进行字符串拼接?

之前在阅读《阿里巴巴Java开发手册》时,发现有一条是关于循环体中字符串拼接的建议,具体内容如下: 那么我们首先来用例子来看看在循环体中用 + 或者用 StringBuilder 进行字符串拼接的效率...

武培轩
今天
8
0
队列-链式(c/c++实现)

队列是在线性表功能稍作修改形成的,在生活中排队是不能插队的吧,先排队先得到对待,慢来得排在最后面,这样来就形成了”先进先出“的队列。作用就是通过伟大的程序员来实现算法解决现实生活...

白客C
今天
81
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部