Web绘图（2）——客户端VML-优快云博客

本文介绍如何使用VML进行客户端绘图，包括基本图形绘制、图形移动交互及常用标签属性。通过实例展示了圆形、圆角矩形的绘制方法及响应鼠标事件实现图形拖动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web绘图（2）——客户端VML

上篇介绍的服务器端绘图，有一个很重要的缺点，就是如果图形有变化，比如要将圆移动到另外一个位置，必须回传到服务器重新绘制。页面回传会造成屏幕闪烁，使用起来很不舒服。

那么有没有不需回传的办法呢？答案就是客户端绘图。ActiveX是一种解决方案，我曾经做过一套电力操作票系统，使用ActiveX画图，可以实现任意需要的交互效果，且无刷新。但是，其安全性是个大问题，即使使用了数字签名很多浏览器也不允许执行，要让客户降低浏览器安全级别允许ActiveX运行太难了。

值得庆幸的是，目前浏览器开发厂商也在考虑Web绘图的功能，目前使用类似html脚本绘图的有SVG和VML。SVG是一个国际标准，可惜的是如果让IE支持，客户端需要安装一个组件。VML是微软标准，但IE支持就足够了，毕竟目前IE市场份额最大，垄断啊。

言归正传，下面看一下VML绘图。

1．VML绘图入门

新建网站，在Default.aspx源模式下，修改成如下代码：

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

</head>

<body>

<div>

<v:Oval fillcolor='red' style='width:100;height:150'/>

<v:oval strokecolor=blue style="position:absolute;z-index:2;left:300;top:100;width:100;height:150">

</v:oval>

<v:RoundRect FILLCoLOr=green strokecolor=blue style=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;>

包含<b>内容</b>

</v:roundrect>

</div>

</form>

</body>

</html>

运行，会看到画了一个红色实心圆（oval是圆）、一个蓝色空心圆和一个圆角矩形。注意代码中我将aspx最上面两行代码删除了，包括那个page，否则图形显示不出来。

从代码看，与html代码没有什么区别，我们只要了解用哪些标签就可以了。这个先放一放，到第3部分再说，我们先看一下移动效果。

2．图形移动

下面我们让蓝色空心圆用鼠标点击后，可以跟随鼠标移动。代码如下：

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

</head>

var enableMove = false;

function mouseMove()

{

if(enableMove)

{

x.style.posLeft=event.x;

x.style.posTop=event.y;

}

function mouseDown(oEvent)

{

enableMove = true;

document.onmousemove=mouseMove;

}

function mouseUp(oEvent)

{

enableMove = false;

}

</script>

<div>

<v:Oval fillcolor='red' style='width:100;height:150'/>

<v:oval strokecolor=blue style="position:absolute;z-index:2;left:300;top:100;width:100;height:150" id="x" onmousedown="mouseDown(event);">

</v:oval>

<v:RoundRect FILLCoLOr=green strokecolor=blue style=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;>

包含<b>内容</b>

</v:roundrect>

</div>

</form>

</body>

</html>

注意阴影部分代码。蓝色空心圆我们给了一个id为x，并将mousedown事件设置为函数mouseDown。该函数先将全局变量enableMove置为true，在mouseMove中，如果该变量为true，则x的位置跟随鼠标移动。Body中增加onmouseup事件，即鼠标松开鼠标后将变量置回false。

可以运行看一下效果。

3．常用VML标签

标签	图形
Line	直线
Oval	圆
Rect	矩形
RoundRect	圆角矩形
Arc	圆弧
Image	图片
Polyline	多边形
Fill	填充
Textbox	文本框

4．VML特有属性

属性名	默认值	值类型/范围	用途
strokeweight	0.75pt=1px	number	描述图形的边框粗度
strokecolor	black	color	描述图形的边框颜色
stroked	true	boolean	描述图形是否使用边框
fillcolor	white	color	描述图形的背景颜色
filled	true	boolean	描述图形是否使用背景
print	true	boolean	描述图形是否允许被打印机打印
coordsize	1000,1000	Vector2D	暗示图形与容器空间的大小比例
coordorigin	0 0	Vector2D	coordinate at top-left corner of element
wrapcoords	null	string	outline to use for tight text wrapping