VML簡介

分享于 

6分钟阅读

Web开发

  简体

介紹

當我首先開始使用HTML時,我無法理解為什麼沒有功能繪製形狀和非水平線。 在幾年之後我發現了 VML ( 即將被SVG替代)。 不是錯誤,HTML是一個非常強大的GUI工具,但隨著向量圖形的出現,它的功率呈指數。

概述

VML是允許開發人員直接在HTML頁面上繪製的技術,就像它是GDI畫布一樣。 語法由 2部分組成: 標記和代碼。這些是互斥的。 不幸的是,可以能是由於採用速率非常慢,文檔模型很差,很少用於示例( 這裡也是)。 為了使用 VML,你需要確保 IE5.0 安裝包含VML插件。 這是一個真正基本的VML形狀。

想在你的機器上得到完整的樣品? 首先,你需要將命名空間"導入"添加到HTML頁面中:

<htmlxmlns:v="urn:schemas-microsoft-com:vml">

接下來,你將需要向頁面添加一個新的behaviour:

<style> v:* { behavior: url(#default#VML); }</style>

就是這樣它不會做任何事情但這會讓你的網頁。 這裡基礎代碼將被假定為其他示例。 嘗試在 <body> 標記的任何位置添加這裡選項:

<v:roundrectstyle="width:150pt;height:50pt"/>

請注意,有效的XML語法應用於。 如果不遵守這裡公理,那麼頁面可以顯示不可以預測的,並使調試非常繁瑣。 實際的VML標記是相當自我解釋和人類可讀的( XML標準的一般目標)。 注意 v: 標記前綴,它指定給 IE 呈現引擎,這個例子中的roundrect 標記將不同地處理它的他標記。

詳細視圖:

這是什麼意思一個優點是它的分鐘大小與圖像比較。 根據你設計的webplications的類型,這可能是合理的。 同樣:

  • 載入時更改樣式( 顏色等。)的能力。
  • 動態腳本的功能。 ( 稍後解釋)

希望你能看到VML不僅僅是一個扭曲的1像素像素圖像。 下面是我想在HTML中使用的著名對角線的代碼,該代碼非常長:

<v:linefrom="10,10"to="100,100"/>

代碼是非常簡潔和簡單的(。用於簡單形狀的albiet )。 對於這種類型的形狀,使用 from(x,y) to(x,y) 命令語法。 對於大多數簡單的網路圖形,上面 示例可能已經足夠了,但是讓我們深入了解一些。

嘗試這個:

<v:ovalstyle="position:absolute;top:100;left:100; width:150pt;height:50pt"fillcolor="green"/>

同樣的概念,只是一個不同的形狀。 注意所有太熟悉的style 標記屬性。

這裡有一個使用不同形狀的樣本。

<v:linestrokecolor="red"strokeweight="2pt"from="100pt,100pt"to="200pt,150pt"><v:strokeendarrow="diamond"/></v:line><v:linestrokecolor="yellow"strokeweight="2pt"from="100pt,100pt"to="50pt,100pt"><v:strokeendarrow="classic"/></v:line><v:linestrokecolor="blue"strokeweight="2pt"from="100pt,100pt"to="120pt,120pt"><v:strokeendarrow="block"/></v:line><v:linestrokecolor="black"strokeweight="2pt"from="100pt,100pt"to="150pt,200pt"><v:strokeendarrow="none"/></v:line><v:linestrokecolor="green"strokeweight="2pt"from="100pt,100pt"to="200pt,85pt"><v:strokeendarrow="oval"/></v:line><v:linestrokecolor="green"strokeweight="2pt"from="100pt,100pt"to="200pt,100pt"><v:strokeendarrow="open"/></v:line><v:ovalstyle="width:100pt; height: 50pt"fillcolor="pink"/><v:curvefrom="10pt,10pt"to="100pt,10pt"control1="40pt,30pt"control2="70pt,30pt"></v:curve><v:rectid=myrect fillcolor="red"style="position:relative;top:100;left:100;width:20;height:20;rotation:10"></v:rect>

看起來像( 到最多),在HTML中使用註釋可能是一個很好的計劃。

VML作為圖形工具的一個了不起的事情是,所有的繪畫事件都是為你處理的。 盡量減少瀏覽器或者"不最大化",並將它的移動到屏幕邊緣並重新出現。 它在自己的電腦上重新繪製,而且沒有noticable性能 ! 這是個巨大的獎金。

一個真實的世界? 這是我在失眠過程中發現的圖形引擎的輸出。

這種方法超過標準"let-the-server-make-a-gif"思想的巨大好處是客戶端( 瀏覽器) 可以根據客戶的意願改變形狀,從而提高了性能。 通過給每個可以應用的形狀設置id並使用 inline 事件處理程序來設置 mousedownmousemovemouseup 事件如何處理,我。 之後,這隻是實現一些drag-and-drop代碼的問題。 因此,換句話說,VML的形狀仍然是對 jscript/vbscript的對象。

你可以用來繪製形狀的另一種技術是坐標系對。 這可能會使代碼變得更加複雜,但是對於你的web演示文稿來說,( 實際) 無限的功能。

下面是一個示例:

<v:polylinepoints="5pt,10pt 15pt,20pt 100pt,50pt 50pt,100pt 5pt,10pt"/>

結論&調用操作

目前,SVG規範被設置為超過 VML,並最終由主流瀏覽器支持。 但與這裡同時,pppoe很容易使用,並且可以為低層網路開發人員提供一種新的表達方式。


INT  introduction  VML