如何在客戶端繪圖

時間 2019-12-06

標籤如何客戶端繪圖简体版

原文原文鏈接

上篇介紹的服務器端繪圖，有一個很重要的缺點，就是若是圖形有變化，好比要將圓移動到另一個位置，必須回傳到服務器從新繪製。頁面回傳會形成屏幕閃爍，使用起來很不舒服。javascript

那麼有沒有不需回傳的辦法呢？答案就是客戶端繪圖。ActiveX是一種解決方案，我曾經作過一套電力操做票系統，使用ActiveX畫圖，能夠實現任意須要的交互效果，且無刷新。可是，其安全性是個大問題，即便使用了數字簽名不少瀏覽器也不容許執行，要讓客戶下降瀏覽器安全級別容許ActiveX 運行太難了。html

值得慶幸的是，目前瀏覽器開發廠商也在考慮Web繪圖的功能，目前使用相似html腳本繪圖的有SVG和VML。SVG是一個國際標準，惋惜的是若是讓IE支持，客戶端須要安裝一個組件。VML是微軟標準，但IE支持就足夠了，畢竟目前IE市場份額最大，壟斷啊。java

言歸正傳，下面看一下VML繪圖。瀏覽器

1．VML繪圖入門
新建網站，在Default.aspx源模式下，修改爲以下代碼：安全

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">服務器

<head runat="server">app

<title>無標題頁</title>函數

<STYLE>v\:*{behavior:url(#default#VML);}</STYLE>網站

</head>url

<body>

<div>

<v:Oval fillcolor='red' style='width:100;height:150'/>

<v:oval strokecolor=blue >

</v:oval>

<v:RoundRect FILLCoLOr=green strokecolor=blue style=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;>

包含<b>內容</b>

</v:roundrect>

</div>

</form>

</body>

</html>

運行，會看到畫了一個紅色實心圓（oval是圓）、一個藍色空心圓和一個圓角矩形。注意代碼中我將aspx最上面兩行代碼刪除了，包括那個page，不然圖形顯示不出來。

從代碼看，與html代碼沒有什麼區別，咱們只要瞭解用哪些標籤就能夠了。下面咱們先看一下移動效果。

2．圖形移動
下面咱們讓藍色空心圓用鼠標點擊後，能夠跟隨鼠標移動。代碼以下：

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

</head>

var enableMove = false;

function mouseMove()

{

if(enableMove)

{

x.style.posLeft=event.x;

x.style.posTop=event.y;

}

function mouseDown(oEvent)

{

enableMove = true;

document.onmousemove=mouseMove;

}

function mouseUp(oEvent)

{

enableMove = false;

}

</script>

<div>

<v:Oval fillcolor='red' style='width:100;height:150'/>

<v:oval strokecolor=blue id="x" onmousedown="mouseDown(event);">

</v:oval>

<v:RoundRect FILLCoLOr=green strokecolor=blue style=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;>

包含<b>內容</b>

</v:roundrect>

</div>

</form>

</body>

</html>

注意陰影部分代碼。藍色空心圓咱們給了一個id爲x，並將mousedown事件設置爲函數mouseDown。該函數先將全局變量enableMove置爲true，在mouseMove中，若是該變量爲true，則x的位置跟隨鼠標移動。Body中增長onmouseup事件，即鼠標鬆開鼠標後將變量置回false。

能夠運行看一下效果。

3．經常使用VML標籤
標籤                   圖形

Line                   直線

Oval                  圓

Rect                  矩形

RoundRect      圓角矩形

Arc                   圓弧

Image              圖片

Polyline          多邊形

Fill                  填充

Textbox         文本框

4．VML特有屬性
屬性名                    默認值         值類型/範圍           用途

strokeweight        0.75pt=1px           number        描述圖形的邊框粗度

strokecolor                black                 color          描述圖形的邊框顏色

stroked                       true                boolean        描述圖形是否使用邊框

fillcolor                       white                 color          描述圖形的背景顏色

filled                            true               boolean        描述圖形是否使用背景

print                            true               boolean        描述圖形是否容許被打印機打印

coordsize              1000,1000          Vector2D       暗示圖形與容器空間的大小比例

coordorigin                  0,0                Vector2D       coordinate at top-left corner of element

wrapcoords                null                   string          outline to use for tight text wrapping

VML支持id、name、class、title、style等html通用屬性。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。