利用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,如标示意如下图。
![]() |
改变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"/>
<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'); |