使用VML进行图形绘制示例

5星 · 超过95%的资源需积分: 10 99 浏览量更新于2024-09-16 收藏 2KB TXT 举报

"该资源提供了一个使用VML（Vector Markup Language）进行图形绘制的JavaScript示例，主要用于演示如何在网页上动态画线、画圆和画矩形。VML是一种基于XML的矢量图形语言，主要在IE浏览器中支持，用于创建和显示矢量图形。以下是对VML画图技术的详细说明： VML（Vector Markup Language）是一种标记语言，允许网页开发者在网页中创建和操作矢量图形。矢量图形是基于数学公式描述的图形，它们可以无限缩放而不会失真，这与像素为基础的位图图像不同。VML主要在Internet Explorer浏览器中得到支持，特别是在那些不支持更现代的SVG（Scalable Vector Graphics）标准的老版本IE浏览器中。在提供的代码中，有两个主要的函数`drawline()`和`draws()`，它们分别用于绘制线条和实时绘制线条。`drawline()`函数接收四个参数，表示线条的起始点和结束点坐标，然后创建一个新的`<v:Line>`元素，并将其添加到ID为"map"的元素中。线条的颜色设置为红色。`draws()`函数则是为了实现鼠标拖动时实时绘制线条的功能，它会在鼠标按下和移动时动态更新线条的位置。此外，代码还使用了JavaScript的事件处理机制，如`window.event`来获取鼠标位置，以及`document.getElementById()`来查找和操作DOM元素。`<html xmlns:v="urn:schemas-microsoft-com:vml">`这一行声明了VML命名空间，使得可以在HTML文档中使用VML元素。 VML虽然在现代网页开发中已较少使用，但在处理老版本IE浏览器的兼容性问题时，或者需要在IE中进行矢量图形绘制时，仍然有一定的价值。随着SVG的普及和浏览器对它的广泛支持，VML的重要性已经大大降低。然而，理解VML的工作原理对于了解早期Web图形处理的历史和技术发展仍然是有益的。总结来说，这个示例展示了如何利用VML在JavaScript中实现基本的图形绘制功能，这对于理解矢量图形在早期Web开发中的应用和浏览器兼容性问题的解决具有一定的教育意义。"

<SCRIPT LANGUAGE="JavaScript">
var x,y,a,b;
function drawline(fromX,fromY,toX,toY){
var strElement= "<v:Line id='line_"+fromX+"_"+fromY+"_"+toX+"_"+toY+"' from='" + fromX + "," + fromY + "' to='" + toX + "," + toY + "' strokecolor='red'></v:Line>";
var newPoint = document.createElement(strElement);
document.getElementById("map").appendChild(newPoint);
}
function draw(){
if(x==undefined&&b==undefined){x=window.event.x;y=window.event.y;return false;}
a=window.event.x;b=window.event.y;
drawline(x,y,a,b)
x=a;y=b;
}
function draws(){
if(x==undefined&&b==undefined){return false;}
if(x==window.event.x&&b==window.event.y){return false;}
if(document.getElementById("TempLine")){document.getElementById("TempLine").outerHTML=""}
var strElement= "<v:Line id='TempLine' from='" + x + "," + y + "' to='" + window.event.x + "," + window.event.y + "' strokecolor='red'></v:Line>";
var newPoint = document.createElement(strElement);
document.getElementById("map").appendChild(newPoint);
}
</SCRIPT>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<META http-equiv="Content-Type" content="text/html;Charset=gb2312">
<title>vml实例</title>
<STYLE>
v\:*{behavior:url(#default#VML);}/*声明V为VML变量*/
</STYLE>
</HEAD>

下载后可阅读完整内容，剩余1页未读，立即下载

xiangjinming1985

粉丝: 0
资源: 2

使用VML进行图形绘制示例

一个简单的VML绘图工具

VML中文手册下载

vml类的js,方便使用vml实现画图

VML画图API

VML画图,手册

在线VML画图工具flashvml2&2

js+vml画图精彩实例

在网页中利用VML画图

VML 画图 统计图、柱状图、饼图、折线图

vml及Flashvml在线画图用例

最新资源

VML 画图统计图、柱状图、饼图、折线图