VML 学习笔记

XML 前端之家
前端之家收集整理的这篇文章主要介绍了VML 学习笔记，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
目标：熟练掌握vml
实现方式：代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。
VML的全称是Vector Markup Language(矢量可标记语言)是基于xml的矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量。微软ie5-8的矢量图标准。由于ie9已经支持SVG了，所以vml到2011年12月已经归档不再更新了，也就是说vml已经在慢慢退出市场，在此我讲这个的原因是虽然退出市场了，但是ie5-8仍旧占据绝大部分的市场，我们不能小视。某种角度看vml的用户更多。我们可以展望未来，但还是不能忘记现在的环境。
用法：
1,添加xml的命名空间 xmlns ，写法如下：
[html] view plain copy
  1. <htmlxmlns:v="urn:schemas-microsoft-com:vml">
2,添加行为和命名空间的关系，至于这句话的意思后面有详细解释
copy
    style>v\:*{behavior:url(#defualt#vml);display:inline-block}</>
有了上面的两个步骤我们就可以开始用vml“画画了”。
先上一个例子再解释你就明白个中奥妙了：
copy
    >
  1. head>
  2. title>vml>v\:*{behavior:url(#default#vml);display:inline-block}bodyv:ovalstyle="width:50px;height:50px"fillcolor="red">v:ovalhtml>

一个简单的圆就画好了，这里面的v\:* 是一个css样式，表示所有以"V:"开头的标签的dom元素都继承了这个样式，样式内容就是将vml的默认行为给这些元素，既然是继承样式以前我们经常用class继承，这里也是完全可以的，至于后面的display:inline-block,其实是对ie8样式的兼容问题（经过我测试好像加不加这句ie8显示无碍，既然官方给出这样的写法，自有道理，可能是不同版本当时的兼容问题，也可能后期ie8修复了，在此就不多纠结）。这样一来凡是"v:"开头的标签都有了vml的默认行为，那么我们就可以用vml的方式添加属性了，下面我会开始介绍vml的一些形状以及属性。
在此之前我想很多人可能觉得这样通过标签画的矢量图实在无趣，而且不实用，那么我们就来点实用和令人兴奋的东西，我们让javascript将普通的html文档动态创建出符合vml运行的环境。还是看例子：
copy
    htmlxmlns="http://www.w3.org/1999/xhtml"styletype="text/css"scriptlanguage="JavaScript"type="text/javascript" window.onload=function(){
  1. varcont=document.getElementById('dv');
  2. varoval=document.createElement('oval');//创建元素
  4. oval.xmlns="urn:schemas-microsoft-com:vml";//相当于上面的赋值命名空间
  5. oval.style.behavior='url(#default#VML);display:inline-block';//相当于上面添加vml默认样式
  7. oval.style.position='absolute';
  8. oval.style.width='50px';
  9. oval.style.height='50px';
  10. oval.fillcolor='red';
  11. cont.appendChild(oval);
  12. }
  13. scriptdivid='dv'div>
我们就这么很方便的动态创建了一个vml矢量图，如果你有心而且追求扩展性的话，其实我们可以写的更加美妙的js，比如通过：
[javascript] copy
    document.namespaces.add("v","urn:schemas-microsoft-com:vml");
添加document的命名空间，我们还可以创建style标签添加样式，然后appendChild到head标签中。这样是不是更好呢？如果暂时觉得太复杂可以跳过这一部分。
这里应为是基础教程所以就不过多的扩展，以后我还会深入讲解的。
vml图形及属性
如有兴趣深入研究的话可以去msdn上面看看。下面是网址。
http://msdn.microsoft.com/en-us/library/bb250524(v=vs.85).aspx
我就是检主要的，常用的给大家：
CoordSize：
copy
    v:ovalCoordSize='28000,28000'style="position:relative;left:5;top:5;width:100;height:80"/>
  1. >
CoordSize:其实是网格大小，当CoordSize为 28000,28000 就是将横纵坐标和纵坐标被分成了28000个点，这并不是HTML里面默认像素。具体的形状大小定义还要靠style中的width和height。宽和高都是指的多少个网格的宽和高，放大和缩小调整CoordSize的值就可以搞定。默认元素都是从左上角0,0处开始排放。
属性：
属性其实就是形状的表现样式，从下面开始我就不累赘的写html结构了，如果测试代码可以将上面的body中的代码替换成我所给的代码就行了。
copy
    v:linestyle="position:relative"from="0,0"to="100,0"v:strokedashstyle="Dot"EndArrow="Classic"/>
  1. v:line>
这种写法是将属性添加到单独的标签中。
stroke：画笔属性包括：
strokeweight，dashstyle，strokecolor，opacity="0.5"，linestyle线条风格，,joinstyle线条转折样式，filltype线条填充样式。
dashstyle：
linestyle：single，thinthin，thinthick，thickthin，thickbetweenthin
详细的可以自己试试，我给一个thickbetweenthin图片，大家有个概念，是那一块儿变了就行：
joinstyle：round，bevel，miter，完全可以理解为笔触样式，也就是转折地方的样式，我也跟上面一样不多截图了：
以上就不详细解释，如果想深入了解就课看下面的链接吧，里面都有，用的时候查就可以了。
http://msdn.microsoft.com/en-us/library/bb264134(v=vs.85)
fill：填充颜色；
type：gradient,frame可以填充图片,pattern,gradientRadial。
copy
    v:ovalstyle='width:120pt;height:90pt'strokecolor="red"
  1. strokeweight="2.5pt"v:filltype="frame"src="image1.jpg">
method:linear,sigma,any,none 渐变方式。
angle角度 渐变角度。
v:shadow：阴影；
copy
    v:RoundRectstyle="position:relative;width:100;height:50px"v:shadowon="T"type="single"color="#b3b3b3"offset="5px,5px"v:RoundRect 属性ok了下面继续我们的shape的扩展形状上面讲了直线下面接着说形状，形状其实都是由shape衍生出来的对象，shape是最基础也是最强大的绘图方式。下面先说说衍生出来的形状。
    形状
    直线：
    copy
      >

    折线：
    copy
      v:PolyLinefilled="false"Points="0,00,10020,150200,100"style="position:relative"v:strokeStartArrow="Oval"EndArrow="Classic"dashstyle="Dot"v:PolyLine>

    折线就是给几个点从第一个往后链接形成的。
    圆形：
    copy
      v:ovalstyle="position:relative;left:5;top:5;width:100;height:80"/>

    通过left:5;top:5;width:100;height:80可控制长宽以及开始位置。
    矩形：
    分两种一种是直角矩形：
    copy
      v:rectstyle="position:relative;left:5;top:5;width:100;height:80"/>

    另一种是圆角矩形：
    copy
      >

    图片：
    copy
      v:imagesrc="big.GIF"style="position:relative;top:0;left:0;width:165;height:157"/>

    img也有很多特殊的属性，可以控制明暗，图片位置，透明度等
    grayscale是否为黑白色（true false），backlevel取值（-1，1),gain色相（数字）
    图片位置cropbottom,croptop,cropleft,and cropright （0~1）
    最后的两个是比较特殊的，不属于形状对象，可以理解成容器对象。
    shapetype：
    VML的这个功能很有用，模版，顾名思义，它可以减少书写代码的量，又使的代码可读性提高。在理解VML模版的时候，可以和 HTML 的 CSS 一样理解，它是定义好的一种形状，下次使用的时候直接声明 type 属性就可以了。看看下面的例子：
    copy
      v:shapetypeid="arrowUP"coordsize="66"v:pathv="m3,0l0,6,3,0xe"v:shapetypev:shapetype="#arrowUP"style="position:relative;width:50;height:50"/>

    用type指向上面shapetype的id就可以继承下来定义的形状。
    group：
    可以理解成一个画布，我们可以修改画布的CoordSize，或者Rotation 来改变画布的属性进而改变画布里面的图形的展现。
    copy
      v:groupstyle="position:relative;WIDTH:200px;HEIGHT:200px;rotation:45"coordsize="2000,2000"v:group>

    我们用group很简单的改变了图像大小和角度。
    到此我们基本介绍了所有vml的对象和属性，后面我会将shape的path专门提出来介绍，应为实在太强大了，以至于我们了解了shape之后上面这些形状我们完全都可以模拟出来。

    转载自：http://blog.csdn.net/a569171010/article/details/7558291

    猜你在找的XML相关文章

    10分钟掌握XML、JSON及其解析
    引言 NOKIA 有句著名的广告语：“科技以人为本”。任何技术都是为了满足人的生产生活需要而...
    [CXF REST标准实战系列] 一、JAXB xml与javaBean的转换
    Writer：BYSocket（泥沙砖瓦浆木匠） 微博：BYSocket 豆瓣：BYSocket Reprint it anywhere...
    [CXF REST标准实战系列] 一、JAXB xml与javaBean的转换
    Writer：BYSocket（泥沙砖瓦浆木匠） 微博：BYSocket 豆瓣：BYSocket Reprint it anywhere...
    10分钟掌握XML、JSON及其解析
    http://blog.jobbole.com/79252/ 引言 NOKIA 有句著名的广告语：“科技以人为本”。任何技...
    自定义圆形控件RoundImageView并认识一下attr.xml
    (点击上方公众号，可快速关注) 公众号：smart_android 作者：耿广龙｜loonggg 点击“阅读原...
    10分钟掌握XML、JSON及其解析
    引言 NOKIA 有句著名的广告语：“科技以人为本”。任何技术都是为了满足人的生产生活需要而...
    10分钟掌握XML、JSON及其解析(上)
     (点击上方公众号，可快速关注) 来源： Long Luo 的博客 链接：http://longluo.github.i...
    10分钟掌握XML、JSON及其解析(中)
    接上文 二、JSON XML很好很强大，但是最近有另外一个时代弄潮儿，这就是JSON。现在JSON的光...
    10分钟掌握XML、JSON及其解析(下)
    接上文 2.4 如何解析JSON？ Android JSON所有相关类，都在org.json包下。 包括JSONObject、...
    10分钟掌握XML、JSON及其解析
    原文出处：  Long Luo 的博客（@Long_Luo）   引言 NOKIA 有句著名的广告语：“科技以人...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作