• svg流程设计器跨浏览器的首选


    以前在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中绘制的流程图:

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

  • 相关阅读:
    cocos2d-x 纹理研究
    cocos2d-x 获取图片的某像素点的RGBA颜色
    cocos2d-x Menu、MenuItem
    cocos2d-x ScrollView、TableView
    cocos2d-x RenderTexture
    cocos2d-x NotificationCenter
    cocos2d-x ClippingNode
    cocos2d-x Animation
    JDK,JRE,JVM区别与联系(ZZ)
    SQL中join的用法
  • 原文地址:https://www.cnblogs.com/webreport/p/2744337.html
Copyright © 2020-2023  润新知