利用VML标记语言画图、动画制作

 利用VML标记语言画图、动画制作

进行信息技术与学科整合过程中，信息的加工处理过程中经常需要绘图，有时也需要一些动画。相当一部分绘图工作可使用Microsoft画图（可用于绘制各种较为复杂的电路图等），用Microsoft Word(可用于绘制各种几何图形等)，Microsoft Excel（绘制数据图表），用Microsoft Powerpoint等，使用这些软件作图是非常方便快捷的，工作效率比较理想。由于网络应用的发展，很多图形、图片需要在网络上展示，那么应如何处理好作图问题呢？

经过我们研究，对比各种图形制作工具软件后，我们认为使用ofice系列软件还是比较有效的。一般制作过程是这样的：用它们绘制出图形后，再通过复制、选择性粘贴等操作可转换为一张图片发布于网络上。在一些比较简单的情况下，可在Microsoft Word中直接把文件另存为web页，必要时也可把word生成的图片作为素材取出，用于网页制作。

即便如此，还是有一些问题不易解决：用word等生成的网页与网站融合得不是很好，并且由它生成的代码很难被重复利用，比如你想在word生成的网页上加上一些动画控制的效果等就会遇到困难。

不少人认为用FLASH可以解决问题。FLASH几乎成为了网络上动画的事实标准，其动画效果确实比较好，它在信息技术与学科、课程整合中的明显优点是：可自如的产生各种渐变效果，可自如制作各种复杂、漂亮的页面，可随意的制作动画。但是这方面的优点，对教学来说并不重要（课件比赛中常用，因为评委爱看FLASH），实际应用中，我们并不一定需要“漂亮”的界面效果（尤其是在高中的学科学习中），更重要的是要知道过程、原理。如果您做一个课件，把主要精力用于美工是得不偿失的。另一方面，FLASH也有许多致命的问题：(1)要让它与“数据”、“表”、“网页内数据、XML”、等动态信息结合时，就变得比较困难，要与动态网页（asp、php等）结合就更困难了。虽然网络是已有支持服务器端生成flash动画文件的组件，但这种方法并适合于教学，用起来也是比较困难的。(2)要撑握FLASH有关的制作并非一件容易的事，(3)FLASH要与HTML流畅的结合起来也很不容易的，必竟swf文件是二进制的，修改十分不便。也有不少人认为使用几何画板可解决问题，不过我们认为几何画板与网页的结合效果太差，为此我们一直在寻找一种更适合的作图方法。

 

例：在新课程的高一数学中有“利用二分法”求函数值一章。如何制作一个可供学生学习的辅助课件，如何让学生也能在电脑上自如的实现“二分法”求函数值的所有过程和细节呢。如果能够使用记事本编辑程序，并通过IE实现作图、求值功能是最好的。

对于教师来说，可能需要制作一个表达式识别程序，当用户在屏幕上输入任意初等函数时，能够对该函数准确的识别并求值，如f(x)=cos(sin(x))+x^3-e^x。显然这要在FLASH中实现就突然变得困难起来，因为FLASH专长于动画制作，做这些显然就不太适合。

对于学生来说，要得用VB等编程工具来实现，这可是很麻烦的一件事情。

以下我们经过几个月来的研究总结一套有效的方法，非常适合高中数学、物理、化学的教学。现将相关研究成果介绍如下：

VML(Vector Markup Language)是一个最初由Microsoft开发的XML词表，现在IE5.0以上版本对VML提供支持。使用VML可以在IE中绘制矢量图形，所以有人认为VML就是在IE中实现了画笔的功能。

VML的优点：

(1)基于XML标准

XML是公认拥有无穷生命力的下一代网络标记语言， VML具有先天的优势，它的表示方法简单，易于扩展等等。

(2)支持高质量的矢量图形显示

VML支持广泛的矢量图形特征，它们基于由相连接的直线和曲线描述路径。在VML中使用两个基本的元素：shape和group。这两个元素定义了VML的全部结构；shape描述一个矢量图形元素，而group用来将这些图形结合起来，这样它们可以作为一个整体进行处理。

VML规范包括大量的支持多种不同矢量图形特征的元素。下面是VML的预定义图形元素：Shape，Path，Line ，Polyline，Curve，Rect，Roundrect，Oval，Arc，Group

由文本构成的图像，并可集成到HTML

由于VML使用简单的文本来表示图像，这样就可用很少的字节来表示比较复杂的图像。VML与HTML兼容，通过在HTML中声明VML命名空间并声明处理函数，就可以和其他HTML元素一样使用VML元素，在客户端浏览器显示图像。VML标记里面可以定义DHTML大部分属性和事件，比如说id, name, title, onmouseover 等等。

(3)支持交互与动画

VML的功能不只是绘图，他还可以在图形中嵌入超文本，并可实现超级链接等，还可通过脚本语言实现一定的动画功能。

VML的基本概念

VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的。VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML，其中的文本和图片可以很容易的转换，但如果是手绘制的图形在以往的IE里面就无法解释了，如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE里面，使IE也具备了绘图功能。

VML的使用方法见附件。如果你对VML不熟，请先阅读附件。

虽然使用VML有以上众多好处，但要在教学中值真正应用起来还有一定的困难，原因是开发者需对HTML及VML有较深入的了解，这对于电脑教师来说当然不是难事，但对其它老师、学生来说则很困难。那要如何解决这些问题呢？我们开发了一个IE画图组件，可大大简化VML的使用。

以下是我们对这个组件作介绍：

一、引用组件、创建画布，理解坐标

利用记事本编辑以下htm代码，并保存为abc.htm（提示：要想省事点，您应复制以下代码到记事本中）。注意：用记事本保存得到的文件名是以txt为扩展名的，应把扩展名改为htm，或者在保存时选(*.*)文件类型，除了用记事本外，在使用记事本编辑时，最好在快捷工具栏中建立记事本的快捷方式，以方便打开记事本。用记事本打开一个文件时，使用拖放文件的办法打开文件是最方便的。你也可以使用Microsoft Frontpage2000或DreamWeaver等编辑。虽然记事本功能简单，但这也是它的优点，对提高工作效率很有帮助！记事本是编写C++、php、javascript、java、HTML等程序的最佳工具之一，当你对语言不太熟悉时，可考虑Frontpage、DreamWeaver等开发工具辅助生成代码。

 

<script language=javascript src="vml.js"></script>

<v:group id=can1 coordsize="2000,2000" style="width:300px;height:300px;position:relative"/>
 

 

以上二行中，第1行是引入组件，第2行是创建一个画布，画布ID为can1。

 

关于第1行：

src="vml.js"指明组件的位置，请把vml.js放在abc.htm所在的文件平中，如果你没vml.js这个文件。可在此处下载http://www.fjptsz.com/vml/vml.js

当我们引入组件后，得到了一个名为ht的画图工具。

 

关于第2行：

coordsize=”2000,2000”指坐标网格数，x=2000，y=2000，如标示意如下图。

x
 
y
 
 

 

 



改变coordsize的值可对整画布内的图放缩。

 id=can1指该画布的ID号，在程序设计时可用can1或document.all.can1引用该画布对象。

width:300px;height:300px定义画布在IE中显示的横纵尺寸，“px”是象素单位。

 

还可以这样理解坐标：这个的画布中2000个单位（格）对应300个象素。当作图位置超出画布时坐标时，仍然充许的，如：你在坐标（3000，3000）处作图，对应屏幕的（450px，450px）

 

再次说明：如果定义

<v:group id=can1 coordsize="3,2" style="width:3px;height:4px;position:relative"/>
 

则横坐标(x)中3个网格对应3个象素，每格1象素

则纵坐标(y)中2个网格对应4个象素，每格2象素

一个元素的top、lef 、width、heightt值表示其位置和大小，这些值的单位由其父坐标决定。就这里的can1而言，它在父坐标中宽3格，高4格，而它本身定义了3列2行的坐标网格。设can1内有子画布cp，宽w=1，高h=1，则cp在can1中只显示了一个网格。如果cp的坐标网格coordsize也定义为“1，1”，cp中只定义了一个网格，这一个格就是整个cp，对应于can1中的一个网格，尺寸一样大。如果希望，cp大小与can1一样大，那么求要求cp要布满can1的所有网格，即w=3，h=2，要想保持cp内网格大小不变，坐标网格数也必需同时增加为“3，2”。如果坐标网格数不变，每格对应父坐标3*2格，就是这么简单。显然，当坐标网格（xn，yn）的值与大小（w、h）相等时，父、子坐标网格密度相同。否则产生放缩，网格越密，相同坐标值画的图形就小，返之就大！

如果还是不能理解，就想想我们用过的不同密度的坐标纸吧！

例：coordsize="1,1" style="width:1px;height:1px"

它与父坐标网格密度相同，从数学意义上讲，是父子坐标相同。但这样定义的画布只有1个象素，我们将以越界的方式作图。如果画图则没问题，显示文本就显示不了。VML中文本的性质与HTML中的<span></span>标记很相式，具有html标记的共性，不能越界显示。

 

其它：您可在一个HTML文档中创建多个画布，如：

<script language=javascript src="vml.js"></script>

<v:group id=can1 coordsize="2000,2000" style="width:300px;height:300px;position:relative"/><br>

<v:group id=can2 coordsize="2000,2000" style="width:400px;height:400px;position:relative"/>
 

 

二、画一个矩形

在您的HTML中增加以下脚本代码

<script language=javascript src="vml.js"></script>

<v:group id=can1 coordsize="2000,2000" style="width:300px;height:300px;position:relative"/>

此处开始增加javascript脚本
 
 

 



<script language=javascript>

ht.canvas=document.all.can1; //选择can1为当前工作画布

ht.rect(1200,100,300,300); //画矩形

</script>
 

 

ht.canvas=document.all.can1; 或ht.canvas=can1;指定ht的当前工作画布为can1。

ht.rect(1200,100,300,300); 画矩形

ht.rect()的4个参数表示起点坐标及矩形大小，即rect(x，y，width，height)

ht.rect()执行后返回矩形对象，在程序运行过程中，如果你需要对该矩形做动画控制或属性设置时，你应取得该矩形对象。如：c=ht.rect(…)

说明：rect()使用VML的<v:rect/>作图，属表同VML的rect

 

如果你对HTML及程序设计还不熟悉，请先跳过以下几点补充

补充1：画矩形时已自动为你的画的矩形添加了线型元素（是个对象），该元素在矩形中的els.xx，该元素用VML的<v: stroke>生成，所有属性同stroke，例如：

c=ht.rect(1200,100,300,300);

则线型元素为c.els.xx，线型的属性为c.els.xx.dashstyle

线型的属性的可选值有：Solid(默认)，ShortDash，ShortDot，ShortDashDot，ShortDashDotDot，Dot，Dash，LongDash，DashDot，LongDashDot，LongDashDotDot

 

补充2：画矩形时已自动为你设置了矩形的画笔属性，设矩形对象为c，那么画笔属性有以下：

c.fillColor    //填充色

c.filled       //是否填充

c.stroked      //是否有线条

c.strokeColor  //线颜色

c.strokeWeight //线宽度

不单是画矩形有以上画笔属性，画其它图形也有以上属性。

补充3：ht中有个画笔（铅笔）属性qb，即ht.qb，基定义如下：

ht.qb={ //定义铅笔范例

  fillcolor: "#FF0000", //填充色, 作图时赋值给c.fillColor

  filled:   "true",    //是否填充, 作图时赋值给c.filled

  stroked:  "true",    //为f或false时表示无线条, 作图时赋值给c.stroked

  strokecolor:  "#00cc00", //线颜色, 作图时赋值给c. strokecolor

  strokeweight:"1px",     //线宽, 作图时赋值给c. strokeweight

  strokestyle:   "solid"    //线形, 作图时赋值给c.els.xx.dashstyle

}

这是默认的画笔，如果你对它个默认值不满意，你可用相同的方法重新定义一支画笔，并赋值给ht.qb

补充4：给矩形渐变填充、改变填充的透明度、立体形状等

用c.Ael("fill")或ht.Ael(c,"fill")语句可以给c添加“填充”子元素（二级元素），该元素用VML中的<v:fill/>元素生成，所有属性与fill相同。该元素可用c.els.fill取得或者直接ht.Ael()、c.Ael()的返回值取得。

 

例：渐变填充、改变透明度的范列代码

c=ht.rect(1200,100,300,300);

d=c.Ael("fill"); //添加fill元素,并取出该元素赋值给d，d与c.els.fill相同

d.color="#FF0000"; //设置渐变填充颜色1

d.color2="#0000FF"; //设置渐变填充颜色2

d.type="gradient"; 设置渐变填充类型

d.opacity=0.1;//改变透明度
 

用c.Ael("ext")语句可以给c添加“立体”子元素，该元素用VML中的<v: extrusion />元素生成，所有属性与extrusion相同。该元素可用c.els.ext取得或者直接c.Ael()的返回值取得。该元素使用以下默认属性表：on="True" color="red" rotationangle="0,0"

 

例：设置立体形状范例代码

c=ht.rect(1200,100,300,300);

d=c.Ael("ext"); //添加ext元素,并取出该元素赋值给d，d与c.els.ext相同

d.backdepth=5; //设置后延深度
 

 

 

三、画圆角矩形

<script language=javascript src="vml.js"></script>

<v:group id=can1 coordsize="2000,2000" style="width:300px;height:300px;position:relative"/>

<script language=javascript>

ht.canvas=document.all.can1; //选择can1为当前工作画布

ht.rrect(600,0,1000,1600,0.1); //画圆角矩形

</script>
 

 

rrect(x，y，width，height，arc) 画圆角矩形

共5个参数：起点坐标（x，y），矩形大小（width，height），圆角半径（arc）

说明：该函数（方法）使用VML的<v:roundrect/>作图，属表同VML的roundrect

 

四、画圆形

……

ht.oval(1600,0,500,500); //画圆

……
 

 

oval(x，y，width，height)，共4个参数：起点坐标（x，y），画圆大小（width，height）。当width与height不相等时是椭圆。

注意：（x，y）不是圆心，圆心在（x+width/2，y+height/2）

说明：该函数使用VML的<v:oval/>作图，属表同VML的oval

 

五、画直线

c=ht.line(30,640,1000,640); //画线

c.Ael("arr").endArrow="classic"; //补画尾箭头

c.els.arr.startArrow="oval"; //补画始箭头
 

 

line(x1，y1，x2，y2)参数是起点和终点坐标，返回直线元素对象

注意：c.Ael("arr");语句的作用是给元素象对c添加“箭头”子元素，该元素用VML中的<v:stroke/>元素生成，所有属性与stroke相同。

你可用以下语句取出箭头元素对象并对它进行设置：

d= c.Ael("arr"); //添加“箭头”元素，并取出箭头元素赋值给d，d与c.els.arr是同一元素

d.endArrow="classic";  //设置前箭头，本句与c.els.arr.endArrow="oval";等价

d. startArrow="oval";  //设置尾箭头，本句与c.els.arr.startArrow="oval";等价

箭头有如下几个可选项：Block  Classic  Diamond  Oval  Open

说明：line()函数使用VML中的<v:line/>作图，所有属性表与VML的line相同

 

 

六、画折线

……

ht.polyLine("0,520 400,600 600,520 1000,600").filled="false"; //画折线

……
 

 

这一句不大好理解，可分解为两句，完全等价：

var c=ht.polyLine("0,520 400,600 600,520 1000,600");//每画一个图形都会把该图形对象变量返回。

c.filled="false"; //设置该图形不填充颜色

注意：在VML中，"true"可用"t"代替，"false"可用"f"代替，在脚本中则不能这样使用。

参数说明：

polyLine(path)只有一个路径参数，路径参数是一个字串，该字串为路径坐标序列，每个坐标值之间用逗号或空格分开。注意，每个坐标坐标应由两个值构成。

说明：该函数使用VML的<v:polyline/>作图，属表同VML的polyline

 

七、画曲线

……

ht.bse("0,0 200,800 300,100 400,500 500,0 600,800").filled="false";

……
 

 

ht.bse(path)，参数path规则同折线。


效果如图示：(贝赛尔曲线)

 



ht.curve(path)，参数path为3n个点的（x，y）坐标，这是用3点法作曲线。

 

说明：该函数使用VML中的<v:shape/>作图，所有属性表与VML的shape相同

要想对曲线做更多的设置使用以下代码：

c=ht.curve("0,0 200,800 300,100 400,500 500,0 600,800");

c.filled="false"; //不填充

c.rotation="135";//旋转135度
 

 

八、画圆弧

ht.arc(700,0,800,500,0,320);//画圆弧
 

 

ht.arc(x，y，width，height，r1，r2)

共六个参数：起点坐标（x，y）、大小（width，height），起始及结束角度（r1，r2）

说明：该函数使用VML中的arc作图，所有属性表与VML的arc相同

 

如果改用以下语句可将图形旋转135度：

c=ht.arc(700,0,800,500,0,320);//画圆弧

c.filled="false"; //不填充

c.rotation="135"; //旋转135度
 

 

c.rotation="135"; 该语句实现转动135度，这样的语句同样可应用于其它图形。

 

九、任意形状

ht.shape("m 1800,0 l 1800,1600 l 2300,800 x e");
 

 

shape(path)的参数只有一个，但功能强大，这个path的使用方法与VML的shape标记的使用方法完全相同。

如果你需要对做出来的图形做进一步设置，同样应取出图形对象变量：

c=ht.shape("m 1800,0 l 1800,1600 l 2300,800 x e");
 

 

说明：该函数使用VML中的<v:shape>作图，所有属性表与VML的shape相同

path用法说明：

命令
 参数

个数
 作用
 path例
 图示
 
m
 2
 Move to
 "m 10 10"
 
 
l
 2n
 Line to
 "m 8,65 l 72,65,92,11,112,65,

174,65,122,100,142,155, 92,121,

 42,155, 60,100 x e"
 

 

 
 
c
 6n
 曲线

三点法画曲线
 "m 0,0 c 50,80 70,120 100,40 e"

 

 

 

 
 
 

 

 

 
 
x
 0
 连线到起点，即最后一次move to的地方
 "m 0,0 c 50,80 70,120 100,40 x e"
 
 
e
 0
 结束路径
 "m 0,0 c 50,80 70,120 200,40 e"
 略

 

 
 
t
 2
 用相对上一点坐标定起点

 
 "m 0,0 l 150,50 e t 0,-50 l 0,50 e"
 
 
r
 2n
 用相对坐标画线(line to)

 

 
 "m 0,0 l 100,50 r 50,-50 e"
 
 
v
 6n
 用相对坐标进行三点法曲线作图
 "m 0,0 l 100,50 v

 -10,-60 40,30 70,0 e"

 
 
 
nf
 0
 无填色画线
 "m 0,0 l 50,50 100,0 r 10,20 nf e"
 IE6.0
 
ns
 0
 无线条色
 "m 0,0 l 50,50 100,0 r 10,20 ns e"
 IE6.0
 
ae
 6
 椭圆

6参数：

Center(X,Y) Width,Height     

Angle(Start,End)
 "m 0 0 ae 100 100 200 200

 0 20000000 e"

角度值每单位是360/2^16

x、y半轴为200
 
 
al
 6
 椭圆II

6参数同上
 与上一个的区别是画椭圆结整前面的画线并时自动将画笔move to 圆周上
 略
 
at
 8
 逆时针画弧线

8参数：

left,top,

right,bottom

Start(x,y) End(x,y)
 "m 0,0 at

 100 50 200 150 120,80 160,65 e"

上、下、左、右为圆外切矩四边的值
 
 
ar
 8
 逆时针画弧线II

参数同上

 

 

 

 
 与上一个的区别是画椭圆结整前面的画线并时自动将画笔move to 圆周上
 
 
wa
 8
 顺时针画弧线

8参数：同上

 
 略
 略
 
wr
 8
 顺时针画弧线II

8参数：同上

 
 与上一个的区别是画椭圆结整前面的画线并时自动将画笔move to 圆周上
 略
 
qx
 2n
 水平方向上开始画1/4弧线

参数：结束坐标
 "m 0,0 1 120,30 qx 200,150 e"

直线和1/4弧构成右图

结束点位置为200,150

 

 
 
 
qy
 2n
 垂直方向上开始画1/4弧线

参数：结束坐标
 "m 0,0 1 120,30 qy 200,150 e"

 

 

 
 
 
qb
 2n

 
 二次贝赛尔曲线

内插点为n个,n最少为2

 
 "m 0,0 l 100 100 qb 120 30 220 20 300 200 400 100 r 0 0 e"

 

要画完成画线，还需二个端点，左端点在qb左边，右端点得看情况决定是否定义，如果以x结束画线，右端点为起点，不然得定义右端点，以端点以l或r等结束。

 
 
 

 

 

十、图象文件

ht.img(520,0,625,500,"yp.jpg"); //载入图片
 

 

ht.img(x，y，width，height，src)

共五个参数：起点坐标（x，y）、大小（width，height），图片路径（src）

说明：该函数使用VML中的<v:image>作图，所有属性表与VML的image相同

 

十一、文本处理

c=ht.rrect(600,0,1000,1600,0.1); //圆角矩形

d=c.Ael("txt"); //给c创建文本元素

d.innerHTML="添加文本"; //或c.els.txt.innerHTML="文本";

d.style.fontSize="16px";

d.style.color="#FFFFFF";

c.Ael("sh"); //阴影属性表:on="T" type="single" color="#b3b3b3" offset="5px,5px"
 

 

注意：使用c.Ael("txt")在矩形c内插入“文本框”元素，该元素用对应VML中的<v:textbox/>元素，所有属性与textbox相同。textbox使用以下默认属性值：inset="5px,5px,5px,5px" style="font-size:12px"

 

注意2：使用c.Ael("sh")在矩形c内插入“阴影”元素，该元素用对应VML中的<v: shadow/>元素，所有属性与shadow相同。

 

十二、文本框

C=ht.textbox(0,0,500,500,"文本框");//创建文本框
 

 

ht.textbox(x，y，width，height，text)

共五个参数：起点坐标（x，y）、大小（width，height），文本（text）

c=ht.textbox()返回矩形对象，而文本对象是c.els.txt

ht.text(x,y,width,height,txt)无框文本，参数同上

十三、建立容器

ht.canvas=ht.group(0,700,1,1,"2,2");//用group创建容器，并把它设置为当前画布。
 

ht.group(x,y,sx,sy,cd)

参数说明：容器位置（x，y），容器大小（sx，sy），容器内使用的坐标系（cd），当cd为空时，容器的大小、坐标与父容器相同。

 

说明：该函数返回的是组对象，所有属性与VML中的<v:group>相同

 

十四、关于ht.Ael()、ht.INSel()、ht.Vel()方法

ht.Ael()用来给某元素加上子元素（二级元素），共有以下五种情况：

调用方法示例
 功能
 生成的元素
 VML标记
 默认属性表
 
ht.Ael(c, "xx");
 插入线型元素
 c.els.xx
 stroke
 无
 
ht.Ael(c, "arr");
 插入箭头元素
 c.els.arr
 stroke
 无
 
ht.Ael(c, "txt");
 插入文本元素
 c.els.txt
 textbox
 inset="5px,5px,5px,5px" style="font-size:12px"
 
ht.Ael(c, "sh");
 插入阴影元素
 c.els.sh
 shadow
 on="T" type="single" color="#b3b3b3" offset="5px,5px"
 
ht.Ael(c, "fill");
 插入填充元素
 c.els.fill
 fill
 无
 

ht.Ael(el,tagName)插入元素时，如果发现子元素已存在则不插入。

object.Ael(tagName)也可插入元素，细节同ht.Ael()

ht.Vel(tagName)用于生成一个元素，返回的是tagName标记元素，参数tagName是标记名称，生成的元素对应为VML标记<v:tagName/>

ht.INSel(el,el2,name)用来给某元素插入元素，参数name是el2在el.els中的索引名称，即我们可用el.els[name]来取得el2。当name为空串是，则元素被推入els.els[els.length]，也就是说把el2放在el.els中的最后一个。

使用ht.Vel()和ht.INSel()可生成任意VML元素及元素组。

 

十五、改变叠放次序等

c=ht.textbox(0,0,500,500,"文本框");

ht.zindex(c,8);//改变叠放次序
 

参数说明：ht.zindex（obj，index）有二个参数，obj是图形对象，index是层号，层号越小放在越底层。

ht.moveto（obj，x，y）改变位置

ht.resize（obj，weight，height）改变大小

十六、画数学坐标

ht.axisXY(2200,300,30,20,10,   210,650,550,  300,500,500); //画坐标系
 

 

axisXY:function(x0,y0,h,tx,ty, g,r1,r2,G,R1,R2, jd,JD)创建直角坐标系

（x0，y0）是原点位置，h坐标描点长度，（tx，ty）是各描点上的数字位置偏移量，g是相邻两个描点的距离，r1为左臂长度，r2为右臂长度，jd为坐标角度，G、R1、R2、JD为另一坐标轴相应的参数。

axis:function(x0,y0,jd,r1,r2,g,h,tx,ty,txy,n1,n2) 用于画坐标轴

n1为左臂描点数，n2为右臂描点数，txy表示是否显示描点上的数字，其它同上。

当n1为0时，自动确定n1的描点数，n2也是。

 

十七、放缩

改变元素的coordsize值就可对它整体放缩，连同其内部的元素都会产生同步放缩的放效果。使用ht.resize(el,width,height)也可以，该函数用于改变元素大小，当元素是个容器是，则对容器内的所有元素放缩。

十八、清空画布内容、擦去某一元素等

ht.cls()清除当前画布

ht.clsg(canvas)清清canvas画布

object.removeNode(true); //擦去对象

 

十九、工具函数

ht.toqx(points,qz)将路径点集（串）转为标准曲线或折线path串，当qz为’z’时转折线，为’q’时转曲线。

ht.toarr(s)串转数组，连续空格或逗号合并为一个逗号

ht.tostr(arr)数组转串，逗号分开

ht.isstr(s)判断s是否为串

ht.setzbxP(el)把el元素的坐标及大小设成与父容器相同

ht.setzbx(el,coordsize,width,height)设置坐系

 

二十、动画制作

本动画系统功能强大，可创建各种复杂动画。以下举几个比较简单的例子。

如果你运行以下程序出错，可能是软件已作升，请查阅原档。

1、动画创建方法

给对象添加一个Rm属性，Rm用于控制动画行为。

Object.Rm.ph是运动路径坐标序列（位置关键帧）

Object.Rm.ph2是画线路径坐标序列

Object.Rm.opac是透明度序列

Object.Rm.sz是大小序列

Object.Rm.fcol是填充色序列

Object.Rm.fill是渐变填充色序列

Object.Rm.swei是线宽序列

Object.Rm.rt是族转角度序列

Object.Rm.sh是形状序列

Object.Rm.ext是每个关键帧渐变扩点数

范例：

ps=new Array();

ps.ph="0 0 200 0"; //位置变化

ps.fcol="#FF0000 #FFFF00"; //颜色变化

ps.ext="10 10"; //点扩展数

obj.Rm=ps;

设置好动画行为后，使用ht.mov1start(name,obj)创建动画。该函数可为obj及其内部所有已设置好动画的对象创建动画，并视为一组，组名称为name。

范例：

ht.mov1("can1",can1); //对容器或对象内所有设置动画的物件创建动画。

 

2、与动画运行相关的几个控制函数

Mov1start:function(name) { }//启动动画组，name是动画标识名

mov1stop:function(name) { }//停止动画组

mov1reset:function(name) { }//复位

mov1next:function(name) { }//下一帧

mov1pre:function(name) { }//上一帧

mov1goto:function(name,n){}//帧定位
 

这几个函数全部隶属于ht对象。这几个成员函数的功能明确，故不再说明。

 

 

例1：沿点序列动动并作颜色变化javascript脚本

<script language=javascript src="vml.js"></script>

<v:group id=can1 coordsize="200,200" style="width:30px;height:30px;position:relative"/>

<script language=javascript>

ht.canvas=can1; //选择can1为当前工作画布

sjx=ht.shape("m 1800,0 l 1800,1600 l 2300,800 x e");//绘制一个三角形

//动画设置

ps=new Array();

ps.ph="0 0 200 0"; //位置变化

ps.fcol="#FF0000 #FFFF00"; //颜色变化

ps.ext="10 10"; //点扩展数

sjx.Rm=ps;

//创建并启动画

ht.mov1("can1",can1); //对容器或对象内所有设置动画的物件创建动画

ht.mov1start('can1');
 

</script>

例2：沿点序列运动,较复杂的

document.write('<br>帧数：<span id=out1></span>');

ht.canvas=document.all.can1; //选择can1为当前工作画布

yuan2=ht.oval(700,0,300,400); //画椭圆

ps=new Array();

ps.ph=new Array(); //移动点序列

ps.ext=new Array();//扩展点数,不定义则全为1次

ps.rt=new Array(); //旋转角度序列,不定义则不转动

ps.sz=new Array(); //大小变化序列

ps.opac=new Array(); //透明度序列

ps.count=1000;     //重复次数,为0表示一直重复,不定义则为0

ps.sec=100;        //间隔秒数,不设置则为100ms

ps.mth=function movmth(el){ document.all.out1.innerHTML=el.Rm.tot;}; //创建帧事件

//ps.n=10; //指定关键点数,不指定则默认为ps.ph.length/2或或ps.sh.length/2,前者优先

for(i=0,dx=6.2832/10;i<10;i++){ //设置序列

  ps.ph[2*i]  =1200+700*Math.sin(i*dx);

  ps.ph[2*i+1]=300+300*Math.cos(i*dx);

  ps.ext[i]=10;

  ps.rt[i]=100*i;

  ps.sz[2*i]=300+30*i;

  ps.sz[2*i+1]=400+30*i;

  ps.op[i]=i*0.1;

}

yuan2.Rm=ps;//设置动画

//创建并启动画

ht.mov1("can1",can1); //对容器或对象内所有设置动画的物件创建动画

ht.mov1start('can1');
 

以上程序中：

ps.mth=function movmth(el){ document.all.out1.innerHTML=el.Rm.tot;}; //创建帧事件

用于创建帧事件，你可在帧事件做你想作的事！动画过程中，每移动一个帧都会触发该事件。

说明：在一个容器或画布中，可创建多个对象的动画，然后用ht.mov1一次性启动。

 

例3：线形状变化动画

ht.canvas=document.all.can1; //选择can1为当前工作画布

qxian=ht.curve("0,0 200,800 300,100 400,500 500,0 600,800"); //画曲线,点数必须为偶数

  qxian.filled="false";

ps=new Array();

ps.sh=new Array( //曲线变化,ps4.sh.qz,值为'z'是折线,为'q'是曲线(默认值)

  "0,0 200,800 300,100 400,500 500,0   600,800",

  "0,700 200,100 300,700 400,100 500,700 600,300");

ps.sh_q='z'; //为'q'是曲线

ps.ext="10 10";

qxian.Rm=ps;//设置动画

//创建并启动画

ht.mov1("can1",can1); //对容器或对象内所有设置动画的物件创建动画

ht.mov1start('can1');
 

 

 

例4：//动画制作5(渐变填充)

ht.canvas=can1;

wjx=ht.shape("m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,/

  92,121, 42,155, 60,100 x e"); //画五角星

  wjx.moveto(2200,0);

  wjx.coordsize="50,50";//放大

  d=wjx.Ael("fill");

    d.color="#FF0000",d.color2="#0000FF",d.type="gradient"; //设置渐变填充

    d.opacity=0.1;//改变透明度

//设置动画

ps=new Array();

ps.ph="600 0 1200 0"; //位置变化

//ps.fill渐变填充变化,每组两个参数color1,color2

ps.fill="#FFFF00,#00FF00 #00FFFF,#FFFF00";

ps.scol="#FF0000,#FFFF00"; //线色

ps.swei="1,5"; //线宽

ps.opac="0,1"; //透明度

ps.ext="10 10"; //点扩展数

wjx.Rm=ps;//设置动画

//创建并启动画

ht.mov1("can1",can1); //对容器或对象内所有设置动画的物件创建动画

ht.mov1start('can1');
 
from:http://www.fjptsz.com/xxjs/xjw/rj/107.htm

注：本文范例代码在：http://www.fjptsz.com/vml，组件在http://www.fjptsz.com/vml/vml.js