用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,如標示意如下圖。
?
?
改變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标记语言画图、动画制作的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 《python数据分析与挖掘》-步骤
- 下一篇: pat L1-057 PTA 使我精神焕