VML画连线箭头，line线加粗

一、什么是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.一个简单的范例

程序代码

<html xmlns:v="urn:schemas-microsoft-com:vml"

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.示例：

<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.示例：

<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.示例：

<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.示例：

<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.示例：

<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.示例：

<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(曲线)

<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.示例：

<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.示例：

<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.示例：

<head>

<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.示例：

<head>

<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二级标记，下边我们再来看下如何利用二级标记画一条带箭头的直线：

<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(背景图片)等二级标记。二级标记也有自己的属性，我们只须通过设置这些属性就能画出各种漂亮的图来。二级标记的使用也非常简单，直接嵌套于图形标签中即可

js vml 画图

2008-10-28 21:00

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>

<title>WawaMind beta v1.0</title>

</head>

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>

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/" onclick=/"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>

</html>

地址栏里面输入：

javascript:document.body.innerHTML%20=%20"<textarea%20style=‘height:300;%20width:90%‘>"+document.body.innerHTML+"</textarea>"

可以查看运行时生成的html

VML的全称是Vector Markup Language(矢量可标记语言)是基于xml的矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量。微软ie5-8的矢量图标准。由于ie9已经支持SVG了，所以vml到2011年12月已经归档不再更新了，也就是说vml已经在慢慢退出市场，在此我讲这个的原因是虽然退出市场了，但是ie5-8仍旧占据绝大部分的市场，我们不能小视。某种角度看vml的用户更多。我们可以展望未来，但还是不能忘记现在的环境。

用法：

1,添加xml的命名空间 xmlns ，写法如下：

[html] view
plain copy

<html xmlns:v="urn:schemas-microsoft-com:vml">

2,添加行为和命名空间的关系，至于这句话的意思后面有详细解释

[html] view
plain copy

<style>v\:*{behavior:url(#defualt#vml);display:inline-block}</style>

有了上面的两个步骤我们就可以开始用vml“画画了”。

先上一个例子再解释你就明白个中奥妙了：

[html] view
plain copy

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>vml</title>
<style>v\: * {behavior:url(#default#vml);display:inline-block}</style>
</head>
<body>
<v:oval style="width:50px;height:50px" fillcolor="red"></v:oval>
</body>
</html>

一个简单的圆就画好了，这里面的v\:* 是一个css样式，表示所有以"V:"开头的标签的dom元素都继承了这个样式，样式内容就是将vml的默认行为给这些元素，既然是继承样式以前我们经常用class继承，这里也是完全可以的，至于后面的display:inline-block,其实是对ie8样式的兼容问题（经过我测试好像加不加这句ie8显示无碍，既然官方给出这样的写法，自有道理，可能是不同版本当时的兼容问题，也可能后期ie8修复了，在此就不多纠结）。这样一来凡是"v:"开头的标签都有了vml的默认行为，那么我们就可以用vml的方式添加属性了，下面我会开始介绍vml的一些形状以及属性。

在此之前我想很多人可能觉得这样通过标签画的矢量图实在无趣，而且不实用，那么我们就来点实用和令人兴奋的东西，我们让javascript将普通的html文档动态创建出符合vml运行的环境。还是看例子：

[html] view
plain copy

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vml</title>
</head>
<style type="text/css">
</style>
<body>
<script language="JavaScript" type="text/javascript">
window.onload = function(){
var cont = document.getElementById(‘dv‘);
var oval = document.createElement(‘oval‘);//创建元素
oval.xmlns="urn:schemas-microsoft-com:vml";//相当于上面的赋值命名空间
oval.style.behavior=‘url(#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 id=‘dv‘></div>
</body>
</html>

我们就这么很方便的动态创建了一个vml矢量图，如果你有心而且追求扩展性的话，其实我们可以写的更加美妙的js，比如通过：

[javascript] view
plain 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：

[html] view
plain copy

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>vml</title>
<style>v\: * {behavior:url(#default#vml);display:inline-block}</style>
</head>
<body>
<v:oval CoordSize=‘28000,28000‘ style="position:relative;left:5;top:5;width:100;height:80"/>
</body>
</html>

CoordSize:其实是网格大小，当CoordSize为 28000,28000 就是将横纵坐标和纵坐标被分成了28000个点，这并不是HTML里面默认像素。具体的形状大小定义还要靠style中的width和height。宽和高都是指的多少个网格的宽和高，放大和缩小调整CoordSize的值就可以搞定。默认元素都是从左上角0,0处开始排放。

属性：

属性其实就是形状的表现样式，从下面开始我就不累赘的写html结构了，如果测试代码可以将上面的body中的代码替换成我所给的代码就行了。

[html] view
plain copy

<v:line style="position:relative" from="0,0" to="100,0" >
<v:stroke dashstyle="Dot" EndArrow="Classic" />
</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。

[html] view
plain copy

<v:oval style=‘width:120pt;height:90pt‘ strokecolor="red"
strokeweight="2.5pt">
<v:fill type="frame" src="image1.jpg" />
</v:oval>

method:linear,sigma,any,none 渐变方式。

angle角度渐变角度。

v:shadow：阴影；

[html] view
plain copy

<v:RoundRect style="position:relative;width:100;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
</v:RoundRect>

属性ok了下面继续我们的shape的扩展形状上面讲了直线下面接着说形状，形状其实都是由shape衍生出来的对象，shape是最基础也是最强大的绘图方式。下面先说说衍生出来的形状。

形状

直线：

[html] view
plain copy

<v:line style="position:relative" from="0,0" to="100,0" >
<v:stroke dashstyle="Dot" EndArrow="Classic" />
</v:line>

折线：

[html] view
plain copy

<v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative" >
<v:stroke StartArrow="Oval" EndArrow="Classic" dashstyle="Dot" />
</v:PolyLine>

折线就是给几个点从第一个往后链接形成的。

圆形：

[html] view
plain copy

<v:oval style="position:relative;left:5;top:5;width:100;height:80"/>

通过left:5;top:5;width:100;height:80可控制长宽以及开始位置。

矩形：

分两种一种是直角矩形：

[html] view
plain copy

<v:rect style="position:relative;left:5;top:5;width:100;height:80"/>

另一种是圆角矩形：

[html] view
plain copy

<v:RoundRect style="position:relative;width:100;height:50px"></v:RoundRect>

图片：

[html] view
plain copy

<v:image src="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 属性就可以了。看看下面的例子：

[html] view
plain copy

<v:shapetype id="arrowUP" coordsize="6 6">
<v:path v="m 3,0 l 0,6,6,6,3,0 x e" />
</v:shapetype>
<v:shape type="#arrowUP" style="position:relative;width:50;height:50"/>

用type指向上面shapetype的id就可以继承下来定义的形状。

group：

可以理解成一个画布，我们可以修改画布的CoordSize，或者Rotation 来改变画布的属性进而改变画布里面的图形的展现。

[html] view
plain copy

<v:shapetype id="arrowUP" coordsize="6 6">
<v:path v="m 3,0 l 0,6,6,6,3,0 x e" />
</v:shapetype>
<v:shape type="#arrowUP" style="position:relative;width:50;height:50"/>
<v:group style="position:relative;WIDTH:200px;HEIGHT:200px;rotation:45" coordsize = "2000,2000">
<v:shape type="#arrowUP" style="position:relative;width:50;height:50"/>
</v:group>

我们用group很简单的改变了图像大小和角度。

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

1:2级标记的通用属性

以前，我们常说的VML通用属性，是针对像oval、rect、roundrect这样的一级标记而言的（只是“极道”的学习规则，我不会在你还是一只“VML菜鸟”时，用太多的一级标记、二级标记这些难懂的词语）。而对于大多数的二级标记，是不支持的，只有一个例外，像Textbox内容，即能当作一级标记又能当作二级标记。不过id 这个通用属性，是所有的一、二级标记均支持的属性。

2:stroke边框 - 专用属性参考表

属性名默认值值类型/范围用途

on true boolean 设置处理是否起效

weight 1pt number 描述边框粗度

color black color 描述边框颜色

opacity 1.0 0.0-1.0 描述边框透明度

dashstyle solid solid,dot,dash,dashdot,longdash,longdashdot,longdashdotdot,shortdot,shortdash,shortdashdot,shortdashdotdot 描述边框的线条样式

filltype solid solid,tile,pattern,frame 描述如何填充边框

src null URLstring 当filltype!=solid时，指定填充边框的图像地址

imagesize auto Vector2D 当filltype!=solid时，描述图像放大倍数

imagealignshape true boolean 当filltype!=solid时，描述图像是否居中对齐

color2 null color 当filltype=pattern时，描述图像的融合背景色

startarrow none none,block,classic,diamond,oval,open,chevron,doublechevron 描述线起点的箭头样式

endarrow none none,block,classic,diamond,oval,open,chevron,doublechevron 描述线终点的箭头样式

startarrowwidth medium narrow,medium,wide 当startarrow!=none时，描述起点箭头的宽度

startarrowlength medium short,medium,long 当startarrow!=none时，描述起点箭头的高度

endarrowwidth medium narrow,medium,wide 当endarrow!=none时，描述起点箭头的宽度

endarrowlength medium short,medium,long 当endarrow!=none时，描述起点箭头的高度

miterlimit 8.0 number 描述边框关节位置的厚度

joinstyle round round(rounded join),bevel(beveled join),miter(miter join) 描述边框参加的样式

endcap round flat,square,round 描述边框结束部分

3:开始二级标记的课程！

通过以前所有章节的学习、在到从本章节开始，就表示你已对VML有了相当的认识、掌握了几乎所有的VML一级标记、如果之前的内容你认真学习了的话。

VML二级标记，你可以这样理解：“它是专门为VML一级标记设计的、它们可以修饰几乎所有用VML一级标记绘制的圆形、矩形、弧形、曲线等几乎所有形状，从头到脚、从边框到背景、从立体到背景图片、从路径轨迹到超文本内容、等等。。二级标记可以将基础的图形包装成各式各样千奇百怪、二级标记可以说是一级标记的一件华丽的衣服”。

不过，学习二级标记，我不会把二级标记的所有属性一一演示、讲解，更不会在去讲之前那些基础的知识（如果你不会，那现在就去看、去学、直到会了、能听懂本章节以后的课程我所说的话为止，我也不会在忌讳不加解释的使用一些诸如交接点/通用属性/专用属性/Vector3D/DVML/coorsize/group/line/curve等等词语）。并仅提供关于该二级属性的常识问题以及一些比较有用的、实用的、好用的、抽象的属性演示例子，你可以通过XXX二级标记专用属性参考表提供的数据，自行更改例题，从而自己了解、掌握XX属性是什么效果、什么用、我怎么挪用应用到XX一级标记图形中。

4:二级标记的兼容性问题

学习中你已知道，二级标记几乎可以“从头到脚”的处理图形几乎任何部分。但是如果图形本身“只有头没有脚”，那么你用专门处理“脚”的二级标记去处理它？不用说，肯定是无效的。那“脚”是什么哪？举个例子，line它只是线只有边框概念而没有填充概念，也就是说stroke二级标记可以处理它但fill(背景填充)二级标记就无法处理它。在说image，它只是图像，没有背景填充的概念，所以fill对它也无法处理。在拿oval、rect、roundrect这些图形跟line线相比，前者由于都有背景概念，所以就支持fill填充。但是，它们却无法使用“箭头”，不然，你说oval、rect哪里是起点？哪里是终点？箭头给它加到哪里合适？而line、arc、curve、polyline、shape却不同，他们都是线条类组成的、或根本就是一条line线，它门有线条起点、终点的概念，所以它们就支持在起点、终点增加箭头。请看下面给图形增加箭头的例子对比

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">

<v:line style="Z-INDEX:1;LEFT:225;POSITION:absolute;TOP:110" from="0,0" to="43.5pt,8.25pt" stroked="t" strokecolor="black" strokeweight=".75pt">

<v:stroke opacity="1" startarrow="none" endarrow="classic"/>

</v:line>

<v:arc style="Z-INDEX:1;LEFT:242;WIDTH:61;POSITION:absolute;TOP:169;HEIGHT:71" startangle="359" endangle="119" fillcolor="white" stroked="t" strokeweight="5">

<v:stroke color="red" opacity=".5" startarrow="oval" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>

</v:arc>

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">

<v:oval style="Z-INDEX:1;LEFT:330;WIDTH:58;POSITION:absolute;TOP:95;HEIGHT:58">

<v:stroke opacity="1" startarrow="none" endarrow="classic"/>

</v:oval>

<v:rect style="Z-INDEX:1;LEFT:335;WIDTH:53;POSITION:absolute;TOP:177;HEIGHT:56" fillcolor="white" stroked="t" strokecolor="black" strokeweight=".75pt">

<v:stroke color="red" opacity=".5" startarrow="oval" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>

</v:rect>

显示情况证明oval、rect就不支持箭头，不过却支持边框颜色定义。 5:stroke边框 - 精彩实例我制作了几个抽象的例子，源代码自行分析，并请对照专用属性表修改（其实学习二级标记就是学属性！），篇幅问题不一一作出解释。stroke所涉及的属性，关键是活学活用，不要求全部学会、死记住，但建议应学会专用属性表中我用红色给标记的常用属性，当然多了我不反对，只要你有脑子装~

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">

<v:line style="z-index:1;LEFT:256;POSITION:absolute;TOP:232" from="0,0" to="76.5,-17.25" stroked="t" strokecolor="black" strokeweight="3.75">

<v:stroke opacity="1" startarrow="oval" startarrowwidth="wide" startarrowlength="long" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>

</v:line>

<v:line style="z-index:1;LEFT:249;POSITION:absolute;TOP:151" from="0,0" to="76.5,-17.25" stroked="t" strokecolor="black" strokeweight="3.75">

<v:stroke opacity="1" startarrow="oval" startarrowwidth="narrow" startarrowlength="short" endarrow="classic" endarrowwidth="narrow" endarrowlength="short"/>

</v:line>

<v:line style="z-index:1;LEFT:252;POSITION:absolute;TOP:190" from="0,0" to="76.5,-17.25" stroked="t" strokecolor="black" strokeweight="3.75"> <v:stroke opacity="1" startarrow="oval" startarrowwidth="medium" startarrowlength="medium" endarrow="classic" endarrowwidth="wide"
endarrowlength="long"/>

</v:line>

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">

<v:curve style="z-index:1;LEFT:249;POSITION:absolute;TOP:144" from="0,0" control1="32.25,-15" control2="24.75,24" to="70.5,0" filled="f" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">

<v:stroke opacity="1" startarrow="none" startarrowwidth="narrow" startarrowlength="short" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>

</v:curve>

<v:curve style="z-index:1;LEFT:251;POSITION:absolute;TOP:187" from="0,0" control1="32.25,-15" control2="24.75,24" to="70.5,0" filled="f" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">

<v:stroke opacity="1" startarrow="none" startarrowwidth="narrow" startarrowlength="short" endarrow="classic" endarrowwidth="wide" endarrowlength="long" dashstyle="dash"/>

</v:curve>

<v:rect style="z-index:1;LEFT:248;WIDTH:69;POSITION:absolute;TOP:222;HEIGHT:51" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">

<v:stroke opacity="1" dashstyle="dot"/>

</v:rect>

<v:rect style="z-index:1;LEFT:325;WIDTH:69;POSITION:absolute;TOP:223;HEIGHT:51" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">

<v:stroke opacity="1" dashstyle="dash"/>

</v:rect>

<v:rect style="z-index:1;LEFT:402;WIDTH:69;POSITION:absolute;TOP:223;HEIGHT:51" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">

<v:stroke opacity="1" dashstyle="longDashDotDot"/>

</v:rect>

<v:oval style="z-index:1;LEFT:244;WIDTH:61;POSITION:absolute;TOP:292;HEIGHT:58" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight="2.25">

<v:stroke opacity="1" dashstyle="shortDashDot"/>

</v:oval>

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">

<v:Image style="z-index:1;LEFT:258;WIDTH:100;POSITION:absolute;TOP:136;HEIGHT:100" src="shili/fyw1.jpg" bilevel="f" stroked="t" strokecolor="#e725d6" strokeweight="2.25">

<v:stroke opacity="1" dashstyle="shortDashDot"/>

</v:Image>

<v:roundrect style="z-index:1;LEFT:329;WIDTH:94;POSITION:absolute;TOP:183;HEIGHT:102" arcsize="9830f" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight="22.5">

<v:stroke opacity="0.2"/>

</v:roundrect>

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">

<v:oval style="z-index:1;LEFT:136;WIDTH:193;POSITION:absolute;TOP:115;HEIGHT:185" fillcolor="yellow" stroked="t" strokecolor="#e725d6" strokeweight="3.75"> <v:stroke filltype="frame" opacity="1" src="shili/fyw2.jpg"/>

</v:oval>

<v:oval style="z-index:1;LEFT:356;WIDTH:193;POSITION:absolute;TOP:119;HEIGHT:185" fillcolor="yellow" stroked="t" strokecolor="#e725d6" strokeweight="18.75">

<v:stroke filltype="frame" opacity="39321f" src="shili/haha.gif"/>

</v:oval>

<v:rect style="z-index:1;LEFT:593;WIDTH:131;POSITION:absolute;TOP:160;HEIGHT:127" fillcolor="white" stroked="t" strokecolor="black" strokeweight="30"> <v:stroke filltype="frame" opacity=".5" src="shili/fyw1.jpg"/>

</v:rect>

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">

<v:rect style="z-index:1;LEFT:262;WIDTH:100;POSITION:absolute;TOP:147;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="green" strokeweight="15"> <v:stroke filltype="pattern" opacity="1" color2="red" src="shili/fyw1.jpg"/>

</v:rect>

<v:rect style="z-index:1;LEFT:400;WIDTH:100;POSITION:absolute;TOP:149;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="white" strokeweight="15"> <v:stroke filltype="pattern" opacity="1" color2="yellow" src="shili/fyw1.jpg" imagesize="1,1"/>

</v:rect>

<v:rect style="z-index:1;LEFT:533;WIDTH:100;POSITION:absolute;TOP:151;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="blue" strokeweight="15"> <v:stroke filltype="pattern" opacity="1" color2="lime" src="shili/fyw1.jpg" imagealignshape="f" imagesize="1,1"/>

</v:rect>

<v:rect style="z-index:1;LEFT:679;WIDTH:100;POSITION:absolute;TOP:150;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="blue" strokeweight="15">

<v:stroke filltype="tile" opacity="1" color2="lime" src="shili/fyw1.jpg" imagealignshape="f" imagesize="1,1"/>

</v:rect>

《VML极道教程》原著:沐缘华

1章19节:shadow阴影

1:shadow阴影 - 专用属性参考表

属性名默认值值类型/范围用途

on true boolean 设置处理是否起效

type single single,double,emboss,perspective 描述使用哪种阴影效果

color black color 描述主要阴影颜色

obscured false boolean 暗示看穿图像如果没有在形状上填充

opacity 1.0 0.0-1.0 描述阴影透明度

offset 2pt,2pt Vector2D 描述阴影的XY偏移度

color2 gray color 当type!=single时，描述二次投影颜色

offset2 0pt,0pt Vector2D 当type!=single时，描述二次投影XY偏移度

origin 0,0 Vector2D 当filltype!=solid时，描述阴影与投影的交接度

matrix null string 当filltype!=solid时，描述变换点阵的强度

2:shadow阴影 - 应用精彩实例

即使是极道教程，也没有什么好说的，一切靠你自己分析研究、修改代码达到精通为止。对着例子、属性表自己动手，是最佳的学习方法。另外该标记相当重要，务要靠自己的努力学会！

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>

<v:oval style="Z-INDEX:3131;LEFT:234px;WIDTH:67px;POSITION:absolute;TOP:142px;HEIGHT:53px" fillcolor="white" strokecolor="black" strokeweight=".75pt">

<v:shadow on="t" color="black" opacity="52428f" offset="1.5pt,1.5pt"/>

</v:oval>

<v:rect style="Z-INDEX:3135;LEFT:320px;WIDTH:50px;POSITION:absolute;TOP:145px;HEIGHT:52px" fillcolor="white" strokecolor="black" strokeweight=".75pt">

<v:shadow on="t" color="black" opacity="52428f" offset="3.75pt,1.5pt"/>

</v:rect>

<v:roundrect style="Z-INDEX:3137;LEFT:402px;WIDTH:60px;POSITION:absolute;TOP:139px;HEIGHT:59px" arcsize="9830f" fillcolor="white" strokecolor="black" strokeweight=".75pt">

<v:shadow on="t" color="red" opacity="52428f" offset="-3.75pt,1.5pt"/>

</v:roundrect>

<v:line style="Z-INDEX:3139;LEFT:303px;POSITION:absolute;TOP:228px" from="0,0" to="100.5pt,-.75pt" strokecolor="black" strokeweight="5pt"> <v:shadow on="t" color="red" opacity="52428f" offset="3.75pt,2.25pt"/>

</v:line>

<v:curve style="Z-INDEX:3148;LEFT:452px;POSITION:absolute;TOP:235px" from="0,0" control1="42pt,-51.75pt" control2="-4.5pt,49.5pt" to="28.5pt,-4.5pt" filled="f" fillcolor="white" strokecolor="black" strokeweight=".75pt">

<v:shadow on="t" color="green" opacity="52428f" offset="1.5pt,.75pt"/>

</v:curve>

<v:Image style="Z-INDEX:3161;LEFT:509px;WIDTH:67px;POSITION:absolute;TOP:202px;HEIGHT:68px" src="shili/fyw1.jpg" bilevel="f">

<v:shadow on="t" color="yellow" opacity="52428f" offset="15pt,-15pt"/>

</v:Image>

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>

<v:oval style="Z-INDEX:3170;LEFT:303px;WIDTH:121px;POSITION:absolute;TOP:139px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt"> <v:shadow on="t" type="double" color="blue" opacity="52428f" offset="7.25pt,7.25pt"/>

</v:oval>

<v:oval style="Z-INDEX:3170;LEFT:444px;WIDTH:121px;POSITION:absolute;TOP:142px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt"> <v:shadow on="t" type="perspective" color="blue" opacity="26214f" matrix="78643f" offset="7.25pt,7.25pt"/>

</v:oval>

<v:oval style="Z-INDEX:2999;LEFT:505px;WIDTH:96px;POSITION:absolute;TOP:203px;HEIGHT:110px" fillcolor="yellow" strokecolor="black" strokeweight=".75pt"/>

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>

</v:oval>

<v:oval style="Z-INDEX:3170;LEFT:532px;WIDTH:121px;POSITION:absolute;TOP:226px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt">

<v:shadow on="t" type="double" color="blue" opacity="52428f" color2="green" offset="2.25pt,2.25pt" offset2="4pt,4pt"/>

</v:oval>

<v:oval style="Z-INDEX:3170;LEFT:526px;WIDTH:121px;POSITION:absolute;TOP:106px;HEIGHT:101px" filled="t" fillcolor="red" strokecolor="red" strokeweight=".75pt"> <v:shadow on="t" type="double" color="blue" opacity=".5" color2="green" offset="22.25pt,32.25pt"
offset2="-22pt,32pt"/>

</v:oval>

一、什么是VML

二、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.一个简单的范例

程序代码

<html xmlns:v="urn:schemas-microsoft-com:vml"

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相同。

时间： 2024-10-16 05:03:28

VML画连线箭头，line线加粗

VML画连线箭头，line线加粗的相关文章

【unity实用技能】Unity画一条带箭头的线

XCL-Charts画线图(Line Chart)

opencv-视频处理--画线（越线、拌线）

洛谷 P3014 [USACO11FEB]牛线Cow Line

The usage of Markdown---文字强调：加粗/斜体/文本高亮/删除线/下划线/按键效果

技术培训----线上 PK 线下?

visio中如何画线条或箭头

“互联网+”时代，线上与线下仍无法互相取代

观澜的朋友们看过来！4号线北延线隧道全线贯通！