VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的,在我认为, VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML,其中的文本和图片可以很容易的转换,但如果是手绘制的图形在以往的IE里面就无法解释了,如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE里面,使IE也具备了绘图功能。
VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途。
╭════════════════════════════╮
║ ║
║ 免费的学习、交流、源码、工具网站,欢迎大家访问! ║
║ http://www.j2soft.cn/ ║
║ EMAIL:cuizm@163.com ║
╰════════════════════════════╯
VML的元素包括:SHAPE、LINE、POLYLINE、RECT、ROUNDRECT、OVAL、IMAGE、GROUP等,用这些对象,可以在WEB页面中通过JAVASCRIPT动态生成各种图形,如:数据图表、矢量地图等。
刚开始学习的时候,看了帮助资料之后,觉得通过JAVASCRIPT动态生成各种图形很容易,但是真正使用的时候,遇到了各种问题,才知道,VML也不是那么好控制。其中遇到的最大的问题是加TEXTBOX文本对象(一般与矩形控件或者LINE控件结合,用TEXTBOX控件来做介绍)的时候,文字显示不出来。
通过自己多次的试验,终于找到了动态生成TEXTBOX对象的方法,好东西不敢独享,特总结出来,与大家共勉。代码如下:
//新建一个VML圆角矩形结点
//aStrLeft:矩形左边坐标;aStrTop:矩形顶部坐标;aStrWidth:矩形宽度;
//aStrHeight:矩形高度;aStrID:结点ID;aStrText:结点内容;aStrAlt:结点提示;
function createItem (aStrLeft, aStrTop, aStrWidth, aStrHeight, aStrID, aStrText, aStrAlt)
{
var strRoundRect = "<vml:roundrect title='" + aStrAlt + "' id='" + aStrID
+ "' fillcolor='#EEEEEE' style='LEFT: " + aStrLeft + "px; TOP:" + aStrTop
+ "px; WIDTH: " + aStrWidth + "; POSITION: absolute; HEIGHT: " + aStrHeight
+ ";vertical-align:middle;CURSOR:hand;TEXT-ALIGN:center;z-index:1'>"
+ "</vml:roundrect>";
var strText = "<vml:textbox id='txt" + aStrID + "' onselectstart='return false;'>"
+ "</vml:textbox>";
var objRoundRect = document.createElement (strRoundRect);
var objText = document.createElement (strText);
objText.innerHTML = aStrText;
objRoundRect.insertBefore (objText);
document.forms[0].insertBefore (objRoundRect);
}
//新建一个Line对象
//aStrSource:Line对象的缘;aStrObject:Line对象的目标;
//(即从哪到哪画一条直线)
function createLine (aStrSource, aStrObject)
{
var strLine = "<vml:line source='" + aStrSource + "' object='" + aStrObject + "'>"
+ "</vml:line>";
var strStroke = "<vml:stroke endarrow='Classic'></vml:stroke>";
var objLine = document.createElement (strLine);
var objStroke = document.createElement (strStroke);
objLine.insertBefore (objStroke);
document.forms[0].insertBefore (objLine);
drawLine ();
}
以上是创建圆角矩形结点(包括文字介绍)与直线对象的两个比较简单的方法。各详细的介绍,请查看下面的网站进行学习: