上篇介绍的服务器端绘图,有一个很重要的缺点,就是如果图形有变化,比如要将圆移动到另外一个位置,必须回传到服务器重新绘制。页面回传会造成屏幕闪烁,使用起来很不舒服。
那么有没有不需回传的办法呢?答案就是。ActiveX是一种解决方案,我曾经做过一套电力操作票系统,使用,可以实 现任意需要的交互效果,且无刷新。但是,其安全性是个大问题,即使使用了数字签名很多浏览器也不允许执行,要让客户降低浏览器安全级别允许ActiveX 运行太难了。
值得庆幸的是,目前浏览器开发厂商也在考虑的功能,目前使用类似html脚本绘图的有和VML。SVG是一个国际标准,可惜的是如果让IE支持,客户端需要安装一个组件。VML是微软标准,但IE支持就足够了,毕竟目前IE市场份额最大,垄断啊。
言归正传,下面看一下。
1.入门
新建网站,在Default.aspx源模式下,修改成如下代码:<html xmlns="" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head runat="server">
<title>无标题页</title>
<STYLE>v\:*{behavior:url(#default#VML);}</STYLE>
</head>
<body>
<form id="form1" runat="server">
<div>
<v:Oval fillcolor='red' style='width:100;height:150'/>
<v:oval strokecolor=blue >
</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代码没有什么区别,我们只要了解用哪些标签就可以了。下面我们先看一下移动效果。
2.
下面我们让蓝色空心圆用鼠标点击后,可以跟随鼠标移动。代码如下:<html xmlns="" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head runat="server">
<title>无标题页</title>
<STYLE>v\:*{behavior:url(#default#VML);}</STYLE>
</head>
<body οnmοuseup="mouseUp(event);">
<script language="javascript">
var enableMove = false;
function mouseMove()
{
if(enableMove)
{
x.style.posLeft=event.x;
x.style.posTop=event.y;
}
}
function mouseDown(oEvent)
{
enableMove = true;
document.οnmοusemοve=mouseMove;
}
function mouseUp(oEvent)
{
enableMove = false;
}
</script>
<form id="form1" runat="server">
<div>
<v:Oval fillcolor='red' style='width:100;height:150'/>
<v:oval strokecolor=blue id="x" οnmοusedοwn="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.常用
标签 图形 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 wrappingVML支持id、name、class、title、style等html通用属性。