您好,登錄后才能下訂單哦!
這篇文章主要介紹“如何用Javascript+VML實(shí)現(xiàn)流程設(shè)計(jì)器”,在日常操作中,相信很多人在如何用Javascript+VML實(shí)現(xiàn)流程設(shè)計(jì)器問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對(duì)大家解答”如何用Javascript+VML實(shí)現(xiàn)流程設(shè)計(jì)器”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
VML相當(dāng)于IE里面的畫筆,能實(shí)現(xiàn)你所想要的圖形,而且結(jié)合腳本,可以讓圖形產(chǎn)生動(dòng)態(tài)的效果。VML是微軟1999年9月附帶IE5.0發(fā)布的,在我認(rèn)為,VML其實(shí)是Word和HTML結(jié)合的產(chǎn)物??梢詫ord文檔另存為HTML,其中的文本和圖片可以很容易的轉(zhuǎn)換,但如果是手繪制的圖形在以往的IE里面就無法解釋了,如果都轉(zhuǎn)換成圖形文件又不太現(xiàn)實(shí)。于是微軟把Word里面的圖形控件結(jié)合到IE里面,使IE也具備了繪圖功能。
VML的全稱是VectorMarkupLanguage(矢量可標(biāo)記語言),矢量的圖形,意味著圖形可以任意放大縮小而不損失圖形的質(zhì)量,這在制作地圖上有很大用途。顯然只有IE支持。
此例使用Javascript+VML實(shí)現(xiàn)
VML畫線段:
Line是做圖中最常用的,它有兩個(gè)特殊的屬性from和to,就是起始點(diǎn)和終止點(diǎn)坐標(biāo)。
<v:linefromv:linefrom="0,0"to="100,50"style="position:relative;"/>
◆如果要改變線的樣式,LineStyle(Stroke)屬性可以做到:
Single(默認(rèn)),ThinThin,ThinThick,ThickBetweenThin
◆如果要改變線的類型,可以用DashStyle(Stroke)屬性:
<v:linestylev:linestyle="position:relative"from="0,0"to="100,0"> <v:strokedashstylev:strokedashstyle="Dot"/> </v:line> Solid(默認(rèn)):見上圖 ShortDash: ShortDot: ShortDashDot: ShortDashDotDot: Dot: Dash: LongDash: DashDot: LongDashDot: LongDashDotDot:
在畫坐標(biāo)的時(shí)候,需要箭頭,VML已經(jīng)定義好了箭頭,在Stroke體現(xiàn):EndArrow和StartArrow屬性,一個(gè)是線開始的時(shí)候有箭頭,另一個(gè)是線結(jié)束的時(shí)候有箭頭。箭頭的樣式也有不少:
<v:linestylev:linestyle="position:relative"from="0,0"to="100,0"> <v:strokeEndArrowv:strokeEndArrow="Classic"/> </v:line> EndArrow="Block": EndArrow="Classic":(這個(gè)看起來還比較舒服) EndArrow="Diamond": StartArrow="Oval": StartArrow="Open":
PolyLine是Line的變形,是不規(guī)則的連續(xù)的線。它有個(gè)特殊的屬性Points,用來設(shè)置每個(gè)點(diǎn)的坐標(biāo)。例如:
<v:PolyLinefilledv:PolyLinefilled="false"Points="0,00,10020,150200,100"style="position:relative"/>
一樣可以設(shè)置它的線的樣式和類型以及箭頭(IE5.0中,PolyLine不支持Arrow)
<v:PolyLinefilledv:PolyLinefilled="false"Points="0,00,10020,150200,100"style="position:relative"/> <v:strokeStartArrowv:strokeStartArrow="Oval"EndArrow="Classic"dashstyle="Dot"/> </v:PolyLine>
Javascript+VML畫矩形:
用VML畫矩形,必須設(shè)置,其他就沒有什么特別的。在這節(jié),順便講講shadow對(duì)象和TextBox對(duì)象:
<v:Rectstylev:Rectstyle="position:relative;width:100;height:50px"/>
RoundRect顧名思義,是圓角的矩形,這種形狀在畫流程圖的時(shí)候很常用,如果加上陰影,就更好看了:
<v:RoundRectstylev:RoundRectstyle="position:relative;width:100;height:50px"> <v:shadowonv:shadowon="T"type="single"color="#b3b3b3"offset="5px,5px"/> </v:RoundRect>
在VML里面,True和False可以簡寫成T和F。Shadow中的offset屬性用來設(shè)置偏移原圖的x,y值。on屬性用來決定是否顯示陰影。在矩形中寫字,要用到TextBox對(duì)象。TextBox比較關(guān)鍵的屬性是inset(left,top,right,bottom),意思是隔圖形邊的上下左右多少范圍內(nèi)定位文字:
<v:RoundRectstylev:RoundRectstyle="position:relative;width:120;height:50px"> <v:shadowonv:shadowon="T"type="single"color="#b3b3b3"offset="5px,5px"/> <v:TextBoxinsetv:TextBoxinset="5pt,5pt,5pt,5pt"style="font-size:10.2pt;">Helloworld!</v:TextBox> </v:RoundRect> Helloworld!
當(dāng)然你也可以直接插入HTML代碼,比如說插入一個(gè)
<DivstyleDivstyle="padding-top:5px;padding-left:5px;padding-right:5px;padding-bottom:5px">HelloWorld!</Div>
效果是一樣的。
有了線,及矩形。然后就是Javascript啦!
到此,關(guān)于“如何用Javascript+VML實(shí)現(xiàn)流程設(shè)計(jì)器”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。