利用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');

總結

以上是生活随笔為你收集整理的利用VML标记语言画图、动画制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。