一、什么是VML
VML相当于浏览器的画笔，它可以在浏览器中画出任何你想要的图形：小到直线、圆形、圆弧、曲线、矩形、圆角矩形、多边形；大到一张图画、一个动画、甚至于一个游戏。题中既以标明为简明教程，下边我们只限于讨论使用VML在浏览器中画一些直线、圆形、圆弧等小图。
VML是微软1999年前(具体时间不详)制作推出的，并集成到了IE5+浏览器，同样也是Microsoft Office Art(艺术图型,如word的艺术文字)的核心结构。VML由微软Visio、Autodesk、Macromedia等企业推荐给W3C(WWW最高权利协会)，W3C采取、综合了各方的推荐，于1999年初开始发展SVG，并随后不久推出。SVG是综合VML、GML等的改进(输出效率、图型质量、标记扩展)，被推荐为标准，但SVG需要专门的图像阅读器如(Adobe SVG Viewer)，无法直接被浏览器引擎解析，以我见，SVG更适合于精度矢量图型应用软件开发、VML则适合应用在WEB页，有不少文章说VML已过时，但仁者见仁、智者见智，VML我感觉相当健全(图型质量、输出速度)，它编写简单、浏览器可以解析、与HTML等语言完全兼容，它更具有实际WEB页应用的可行性、深层开发的可行性。但遗憾的是目前支持VML的浏览器仅有IE。
二、VML基础知识
如果你熟悉HTML的话，那么学VML并不是一件复杂的事，因为VML和HTML几乎一样，不仅表现在语法上，还有其对CSS、JS的支持都和HTML如出一辙。
1.基本语法
·标签以<V:XXX>开头</V:XXX>结尾，也支持空标签如<V:XXX />
·标签不区分大小写
·标签中间可嵌套其他标签，可以是VML，也可以是HTML
·属性的写法为"parameter=value"，如<V:XXX parameter="value"></V:XXX>，属性值可加双引号、单引号、也可不加
2.对CSS和JS的支持
·对CSS支持：<V:XXX style="parameter1:value1;parameter2:value2"></V:XXX>
3.VML文件扩展名
·可以是htm、html、asp、php、jsp等，即网页格式
4.VML编辑器
·任何文本编辑器都可以，如记事本、Editplus、Dreamweaver，也有专业的工具如FlashVml3.0
5.一个简单的范例
程序代码
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>第一个VML范例</title>
<style>
v/:* { behavior: url(#default#VML);}
o/:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:line style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>
</body>
</html>
说明：
·xmlns:v="urn:schemas-microsoft-com:vml" //关键语句，表示创建一个叫v的XML命名空间，其中v可自行修改
·xmlns:o="urn:schemas-microsoft-com:office:office" //表示引用office相关的标记处理扩展，WEB中很少用，下边不讲
·v/:* { behavior: url(#default#VML);} //关键语句，指明XML名域v引用的数据是VML标记语言
.<v:line style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/> //创建一条直线，VML在浏览器中画图的语句都是写在<BODY></BODY>之间
三、通用属性
下边这些属性大部分的VML标签中都是可用的，为了便于记忆将其分成了三类，其中第二类和HTML相同、第三类和CSS相同。
1.line(直线)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一条从(0,0)到(200,200)的红色的边框为2px的直线</title>
<style>
v/:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:line strokecolor="red" strokeweight="2" style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>
</body>
</html>
b.专用属性：from 起点坐标；
to 终点坐标
2.Oval(圆)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个宽400高400边框为红色填充为绿色的圆</title>
<style>
v/:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:Oval strokecolor='red' fillcolor='green' style='width:400;height:400'/>
</body>
</html>b.专用属性：无
c.其他说明：其高宽主要由style中的width和height决定
3.rect(矩形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个宽100高100的矩形</title>
<style>
v/:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:rect style="position:absolute;z-index:1;left:320px;top:150px;width:100;height:100;"/>
</body>
</html>
b.专用属性：无
c.其他说明：其高宽主要由style中的width和height决定
4.roundrect(圆角矩形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个圆角矩形</title>
<style>
v/:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:roundrect style="position:absolute;z-index:1;left:220;width:100;top:100;height:100" fillcolor="red" strokecolor="red" strokeweight="1px" arcsize="0.15"/>
</body>
</html>
b.专用属性：arcsize 描述圆矩形四角的弧度值，0-0.5，默认值0.05
c.其他说明：其高宽主要由style中的width和height决定
5.arc(圆弧)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个圆弧</title>
<style>
v/:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:arc style="z-index:1;left:110;width:100;position:absolute;top:10;height:100" startangle="-180" endangle="0"/>
</body>
</html>
b.专用属性：startangle 圆弧的起点缺口，取值范围-360-360，默认值-180；
endangle 圆弧的终点缺口，取值范围-360-360，默认值null(0)
c.其他说明：其高宽主要由style中的width和height决定
6.polyline(多边形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个多边形</title>
<style>
v/:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:polyline style="z-index:1;left:71;position:absolute;top:225" points="0,0,30,-40,100,100,0,0" filled="t" fillcolor="white"/>
</body>
</html>
b.专用属性：points 各折点坐标，上例表示(0,0)、(30,-40)、(100,100)、(0,0)四个点
7.curve(曲线)
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一条曲线</title>
<style>
v/:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:curve style="z-index:1;left:100;position:absolute;top:300" from="0px,0px" to="150px,0px" filled='f' control1="75,150" control2="75,-150"/>
</body>
</html>
b.专用属性：from 起点
to 终点
control1 曲线的第一个曲度
control2 曲线的第二个曲度
c.其他说明：control1、control2可用都不用、用一个或用两个都用
8.shape(任意形状)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建任意曲线</title>
<style>
v/:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 100,100 e"/>
<v:shape style="width:100;height:100" coordsize="50,50" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 x e"/>
</body>
</html>
b.专用属性：path 路径(m 起点、 l 画直线、 c 画曲线、x 曲线自动闭合、 e 结束)
coordsize 比例(实际宽:width*100/coordsize第一个值；实际高:height*100/coordsize第二个值)
type 引用模板的名称
9.shapetype(模板)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>模板使用示例</title>
<style>
v/:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:ShapeType id="m1" coordsize="1000 1000" fillcolor="yellow">
<v:Path v="m0,0 l30,-30,60,0,0,0 e"/>
</v:ShapeType>
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:225;height:1000" type="#m1"/>
<v:Shape style="z-index:1;left:371;width:2600;position:absolute;top:225;height:4600" type="#m1"/>
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:300;height:1000" type="#m1" fillcolor="red"/>
</body>
</html>
b.其他说明：shapetype是专门用来定义形状摸版的（不可见），而后在由shape标记引用、将模版实例化的按照path子属性值输出多边形（可见）。
10.background(背景)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>背景示例</title>
<style>
v/:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:background fillcolor="white">
<v:fill angle=50 type='gradient' color2="yellow"/>
</v:background>
</body>
</html>
11.group(容器)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>容器示例</title>
<style>
v/:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:group id="group1" style='position:absolute;left:0;top:0;z-index:1;width:100;height:100' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>
<v:group id="group2" style='position:absolute;left:100;top:100;z-index:1;width:100;height:100' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>
<v:group id="group3" style='position:absolute;left:100;top:100;z-index:1;width:200;height:200' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>
</body>
</html>
b.其他说明：当使用group后，容器内图形的left、top、width、height等值都是相对group的值。
五、二级标记
二级标记可以看作是对有限的属性进行扩展，就像CSS和HTML的关系一样，利用它我们可以做出更漂亮的图画出来，如上边background(背景)中就使用了fill二级标记，下边我们再来看下如何利用二级标记画一条带箭头的直线：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>二级标记示例</title>
<style>
v/:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:line style="z-index:5;position:absolute;left:200;top:200" to="0,150" strokecolor="red" strokeweight="10px">
<v:Stroke dashstyle="shortdot" endarrow='classic'/>
</v:line>
</body>
</html>
例子中的stroke即为二级标记，它可以用来设置边框样式，除此之外还有shadow(阴影)、fill(填充)、extrusion(立体3D)、textbox、imagedata(背景图片)等二级标记。二级标记也有自己的属性，我们只须通过设置这些属性就能画出各种漂亮的图来。二级标记的使用也非常简单，直接嵌套于图形标签中即可
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com: vml" xmlns="http://www.w3.org/1999/xhtml" > <head> <title>WawaMind beta v1.0</title> </head> <style type="text/css"> v/:* { BEHAVIOR: url(#default#VML) } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; cursor:default; width:1000px; } .wen{ padding-top:3px; padding-left:3px; padding-bottom:3px; padding-right:3px; FONT-SIZE: 9.2pt; LINE-HEIGHT: 20px; BACKGROUND-COLOR: #99ccff; BORDER-BOTTOM: #330099 1px solid; BORDER-LEFT: #330099 1px solid; BORDER-RIGHT: #330099 1px solid; BORDER-TOP: #330099 1px solid; /*filter:Alpha(Opacity="80",FinishOpacity="90",Style="0");*/ cursor:move; z-index:100; } .editdiv { OVERFLOW: auto; background-color:#fff999; cursor:default; height:50px; } .editdiv p { margin:0; } .expanbutton { cursor:hand; font-weight:bold; font-size:20px; } </style> <script type="text/javascript"> var xx=0,yy=0,oldvalue="",poly1,zz=1 //有关移动的过程和函数 var dragapproved=false var eventsource,x,y var popeventsource="" var Pencil = true; var selectObj,selectObjBorder = null; //页面双击创建编辑框 function dbClick() { if (event.srcElement.className!="body") return; var markhtml ="<div class='wen' style='position:absolute;left:"+window.event.offsetX+";top:"+window.event.offsetY+";width:150px;z-index:9'></div>"; var newMark=document.createElement(markhtml); document.body.appendChild (newMark); newMark.innerHTML = "<span class=/"expanbutton/" οnclick=/"expandMemo(this)/">-</span><span></span><div class=/"editdiv/" contentEditable=true onselectstart=/"event.cancelBubble=true/"></div>"; newMark.fromline = new Array(); newMark.toline = new Array(); } //鼠标按下 function msDown() { if(event.button==1){ var isclickScroll= (event.y < 0 || event.y > document.body.clientHeight || event.x < 0 || event.x > document.body.clientWidth) if(selectObj){ //清空选择 selectObj.style.borderStyle = selectObjBorder; selectObj = null; } if(event.srcElement.className=="wen" || event.srcElement.tagName == "curve" || event.srcElement.tagName == "shape" ) //选择要删除的对象 { selectObj = event.srcElement; selectObjBorder = selectObj.style.borderStyle; selectObj.style.borderStyle = "dotted"; selectObj.style.borderWidth = "1px"; } if (event.srcElement.className=="wen") { if(event.shiftKey) //画两个物体间的线 { eventsource=event.srcElement; return; } dragapproved=true //拖动物体 eventsource=event.srcElement temp1=eventsource.style.pixelLeft temp2=eventsource.style.pixelTop x=event.clientX y=event.clientY }else{ //铅笔 dragapproved=false; if (event.srcElement.className!="body" || isclickScroll) //防止在物体上画线 { Pencil = false; return; } Pencil = true; document.body.setCapture(); color1="red" size1=1 xx=event.offsetX;yy=event.offsetY;zz+=1 poly1=document.body.appendChild(document.createElement("<v:shape filled=false path='m0,0 l0,0' style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";width:100;height:100' strokecolor='"+color1+"' strokeweight='"+size1+"' coordsize='100,100'/>")) oldvalue=poly1.path.value.replace("e","") } } } //鼠标移动 function msMove() { if(event.button==1) { if(event.shiftKey) //画两个物体件的线 { return; } if(dragapproved){ //拖动物体 var newleft=temp1+event.clientX-x var newtop=temp2+event.clientY-y eventsource.style.pixelLeft=newleft eventsource.style.pixelTop=newtop //移动线 for(var i = 0; i< eventsource.fromline.length;i++) { eventsource.fromline[i].from = newleft +","+ newtop; } for(var i = 0; i< eventsource.toline.length;i++) { eventsource.toline[i].to = newleft +","+ newtop; } } else if(selectObj && selectObj.tagName == "curve") { //调整曲线 if(!event.altKey) selectObj.control1 = event.x+","+event.y; else selectObj.control2 = event.x+","+event.y; } else{//铅笔功能 if (event.srcElement.className!="body") return; //防止在物体上画线 if(Pencil) { oldvalue+=","+(event.offsetX-xx)+","+(event.offsetY-yy); poly1.path.value=oldvalue poly1.path.value=poly1.path.value.replace(",0,",",").replace(",0 e","e") } } } } //鼠标弹起 function msUp() { document.body.releaseCapture(); if (event.shiftKey && event.srcElement.className=="wen") //画两个物体见的连线。 { var target = event.srcElement; var newline=document.createElement("<v:curve filled=/"false/" from="+eventsource.style.pixelLeft+","+eventsource.style.pixelTop+"/" to=/""+target.style.pixelLeft+","+target.style.pixelTop+"/"></v:curve>"); document.body.insertBefore(newline); eventsource.fromline[eventsource.fromline.length] = newline; target.toline[target.toline.length] = newline; } } //控制编辑框的展开和收缩 function expandMemo(o) { var expand = o.innerText == "+"; var text = o.parentNode.childNodes[2].innerText; o.parentNode.childNodes[1].innerText = expand ? "":text.substring(0,10); o.parentNode.childNodes[2].style.display = expand ? 'block':'none'; o.innerText = expand ? "-" :"+"; } function keyDown() { if(event.keyCode == 46) //删除 { if(selectObj) { document.body.removeChild(selectObj); selectObj = null; } } } document.onkeydown = keyDown </script> <body class="body" οndblclick="dbClick()" οnmοusedοwn="msDown()" οnmοusemοve="msMove()" οnmοuseup="msUp()" onselectstart="return false;"> </body> </html> 地址栏里面输入： javascript:document.body.innerHTML%20=%20"<textarea%20style='height:300;%20width:90%'>"+document.body.innerHTML+"</textarea>" 可以查看运行时生成的html |
扫一扫
3305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
