苏州网站建设的公司哪家好,网站底部友情链接,crm管理系统,织梦和wordpress观看者#xff1a;有xml#xff0c;javascript基础的同学 目标#xff1a;熟练掌握vml 实现方式#xff1a;代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。 VML的全称是Vector Markup Language(矢量可标记语言)是基于xml的矢量的图形#xff0c;意味着图形… 观看者有xmljavascript基础的同学 目标熟练掌握vml 实现方式代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。 VML的全称是Vector Markup Language(矢量可标记语言)是基于xml的矢量的图形意味着图形可以任意放大缩小而不损失图形的质量。微软ie5-8的矢量图标准。由于ie9已经支持SVG了所以vml到2011年12月已经归档不再更新了也就是说vml已经在慢慢退出市场在此我讲这个的原因是虽然退出市场了但是ie5-8仍旧占据绝大部分的市场我们不能小视。某种角度看vml的用户更多。我们可以展望未来但还是不能忘记现在的环境。 用法 1,添加xml的命名空间 xmlns 写法如下 html xmlns:vurn:schemas-microsoft-com:vml2,添加行为和命名空间的关系至于这句话的意思后面有详细解释 stylev\:*{behavior:url(#defualt#vml);display:inline-block}/style有了上面的两个步骤我们就可以开始用vml“画画了”。 先上一个例子再解释你就明白个中奥妙了 html xmlns:vurn:schemas-microsoft-com:vml
head
titlevml/title
stylev\: * {behavior:url(#default#vml);display:inline-block}/style
/head
body
v:oval stylewidth:50px;height:50px fillcolorred/v:oval
/body
/html 一个简单的圆就画好了这里面的v\:* 是一个css样式表示所有以V:开头的标签的dom元素都继承了这个样式样式内容就是将vml的默认行为给这些元素既然是继承样式以前我们经常用class继承这里也是完全可以的至于后面的display:inline-block,其实是对ie8样式的兼容问题经过我测试好像加不加这句ie8显示无碍既然官方给出这样的写法自有道理可能是不同版本当时的兼容问题也可能后期ie8修复了在此就不多纠结。这样一来凡是v:开头的标签都有了vml的默认行为那么我们就可以用vml的方式添加属性了下面我会开始介绍vml的一些形状以及属性。 在此之前我想很多人可能觉得这样通过标签画的矢量图实在无趣而且不实用那么我们就来点实用和令人兴奋的东西我们让javascript将普通的html文档动态创建出符合vml运行的环境。还是看例子 html xmlnshttp://www.w3.org/1999/xhtml
head
titlevml/title
/head
style typetext/css
/style
body
script languageJavaScript typetext/javascript
window.onload function(){var cont document.getElementById(dv);var oval document.createElement(oval);//创建元素oval.xmlnsurn:schemas-microsoft-com:vml;//相当于上面的赋值命名空间oval.style.behaviorurl(#default#VML); display:inline-block;//相当于上面添加vml默认样式oval.style.position absolute;oval.style.width 50px;oval.style.height 50px;oval.fillcolor red;cont.appendChild(oval);
}
/script
div iddv/div
/body
/html我们就这么很方便的动态创建了一个vml矢量图如果你有心而且追求扩展性的话其实我们可以写的更加美妙的js比如通过 document.namespaces.add(v, urn:schemas-microsoft-com:vml);添加document的命名空间我们还可以创建style标签添加样式然后appendChild到head标签中。这样是不是更好呢如果暂时觉得太复杂可以跳过这一部分。 这里应为是基础教程所以就不过多的扩展以后我还会深入讲解的。 vml图形及属性 如有兴趣深入研究的话可以去msdn上面看看。下面是网址。 http://msdn.microsoft.com/en-us/library/bb250524(vvs.85).aspx 我就是检主要的常用的给大家 CoordSize html xmlns:vurn:schemas-microsoft-com:vml
head
titlevml/title
stylev\: * {behavior:url(#default#vml);display:inline-block}/style
/head
body
v:oval CoordSize28000,28000 styleposition:relative;left:5;top:5;width:100;height:80/
/body
/htmlCoordSize:其实是网格大小当CoordSize为 28000,28000 就是将横纵坐标和纵坐标被分成了28000个点这并不是HTML里面默认像素。具体的形状大小定义还要靠style中的width和height。宽和高都是指的多少个网格的宽和高放大和缩小调整CoordSize的值就可以搞定。默认元素都是从左上角0,0处开始排放。 属性 属性其实就是形状的表现样式从下面开始我就不累赘的写html结构了如果测试代码可以将上面的body中的代码替换成我所给的代码就行了。 v:line styleposition:relative from0,0 to100,0
v:stroke dashstyleDot EndArrowClassic /
/v:line这种写法是将属性添加到单独的标签中。 stroke画笔属性包括 strokeweightdashstylestrokecoloropacity0.5linestyle线条风格,joinstyle线条转折样式filltype线条填充样式。 dashstyle linestylesinglethinthinthinthickthickthinthickbetweenthin 详细的可以自己试试我给一个 thickbetweenthin图片大家有个概念是那一块儿变了就行 joinstyleroundbevelmiter完全可以理解为笔触样式也就是转折地方的样式我也跟上面一样不多截图了 以上就不详细解释如果想深入了解就课看下面的链接吧里面都有用的时候查就可以了。 http://msdn.microsoft.com/en-us/library/bb264134(vvs.85) fill 填充颜色 typegradient,frame可以填充图片,pattern,gradientRadial。 v:oval stylewidth:120pt;height:90pt strokecolorred
strokeweight2.5pt
v:fill typeframe srcimage1.jpg /
/v:oval method:linear,sigma,any,none 渐变方式。 angle角度 渐变角度。 v:shadow阴影 v:RoundRect styleposition:relative;width:100;height:50pxv:shadow onT typesingle color#b3b3b3 offset5px,5px/
/v:RoundRect 属性ok了下面继续我们的shape的扩展形状上面讲了直线下面接着说 形状形状其实都是由shape衍生出来的对象shape是最基础也是最强大的绘图方式。下面先说说衍生出来的形状。 形状 直线 v:line styleposition:relative from0,0 to100,0
v:stroke dashstyleDot EndArrowClassic /
/v:line 折线 v:PolyLine filledfalse Points0,0 0,100 20,150 200,100 styleposition:relative
v:stroke StartArrowOval EndArrowClassic dashstyleDot /
/v:PolyLine 折线就是给几个点从第一个往后链接形成的。 圆形 v:oval styleposition:relative;left:5;top:5;width:100;height:80/ 通过left:5;top:5;width:100;height:80可控制长宽以及开始位置。 矩形 分两种一种是直角矩形 v:rect styleposition:relative;left:5;top:5;width:100;height:80/ 另一种是圆角矩形 v:RoundRect styleposition:relative;width:100;height:50px/v:RoundRect 图片 v:image srcbig.GIF styleposition:relative;top:0;left:0;width:165;height:157 / img也有很多特殊的属性可以控制明暗图片位置透明度等 grayscale是否为黑白色true falsebacklevel取值-11),gain色相数字 图片位置cropbottom, croptop, cropleft, and cropright 0~1 最后的两个是比较特殊的不属于形状对象可以理解成容器对象。 shapetype VML的这个功能很有用模版顾名思义它可以减少书写代码的量又使的代码可读性提高。在理解VML模版的时候可以和 HTML 的 CSS 一样理解它是定义好的一种形状下次使用的时候直接声明 type 属性就可以了。看看下面的例子 v:shapetype idarrowUP coordsize6 6 v:path vm 3,0 l 0,6,6,6,3,0 x e /
/v:shapetype
v:shape type#arrowUP styleposition:relative;width:50;height:50/ 用type指向上面shapetype的id就可以继承下来定义的形状。 group 可以理解成一个画布我们可以修改画布的CoordSize或者Rotation 来改变画布的属性进而改变画布里面的图形的展现。 v:shapetype idarrowUP coordsize6 6 v:path vm 3,0 l 0,6,6,6,3,0 x e /
/v:shapetype
v:shape type#arrowUP styleposition:relative;width:50;height:50/
v:group styleposition:relative;WIDTH:200px;HEIGHT:200px;rotation:45 coordsize 2000,2000
v:shape type#arrowUP styleposition:relative;width:50;height:50/
/v:group 我们用group很简单的改变了图像大小和角度。 到此我们基本介绍了所有vml的对象和属性后面我会将shape的path专门提出来介绍应为实在太强大了以至于我们了解了shape之后上面这些形状我们完全都可以模拟出来。 新博客地址 l-zhi
