VML与SVG 矢量绘图

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

那么有没有不需回传的办法呢？答案就是客户端绘图。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代码没有什么区别，我们只要了解用哪些标签就可以了。下面我们先看一下移动效果。

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.οnmοusemοve=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" ο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．常用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

VML支持id、name、class、title、style等html通用属性。

VML与SVG 矢量绘图相关推荐

SVG矢量绘图 path路径详解（贝塞尔曲线及平滑）
维基百科:贝塞尔曲线以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 func ...
SVG矢量绘图 path路径详解（基本画法）
SVG的形状标签里,path是最强大的一个,掌握了path就足够处理常见的绘图问题了. 先看一下path标签的基本用法: <path d="M100,100 L200,200 L200 ...
vml与svg技术初学
最近开始学习vml和svg技术了,到底改学习那一种呢,还是两种都要学习? 说到这两种技术,必须说说flash和silverlight(把这几种技术放在一起,我不知道这样合适不合适). vml:vect ...
VML、SVG、Canvas简介
1.VML: VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途,VML只是被IE支持. ...
Web开发中的矢量绘图(vml,svg)处理和应用
为什么80%的码农都做不了架构师?>>> 前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档.经过了 20 多年的 ...
GML、SVG、VML的比较
GML.SVG.VML的比较 GML.SVG.VML的比较 GML.SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是XML词表,它们的语法并不难理解,但它们都有各自不同的用途和特点,下 ...
多比(SVG/VML)图形控件多比(SVG/VML)图形拓扑图控件免费下载地址
多比图形控件是一款基于Web(VML和SVG技术)的矢量图形控件, 类似于网页上的Visio控件拓扑图软件,是目前国内外最佳的基于web的工作流设计器.工作流流程监视器解决方案. 可广泛应用于包括:电 ...
Web图形开发方案选型，SVG/VML/Flash/Applet优劣比较
Web图形开发方案选型,SVG/VML/Flash/Applet优劣比较在Web 项目开发过程中,我们常常会使用到各类图形,如流程图,饼图,甘特图,散列图,趋势图等等.目前有很多种方法在网页上绘制图 ...
html矢量图 SVG VML 介绍
观看者:想了解html矢量图知识的同学目标:了解html矢量图知识,svg和vml 兼容方案. 实现方式:代码及相关文字解释. 最近web项目需要一些流程图的支持,于是研究了一下这部分东西,觉得很好 ...

VML与SVG 矢量绘图

VML与SVG 矢量绘图相关推荐

最新文章

热门文章