生活随笔
收集整理的這篇文章主要介紹了
Web 绘图—服务器端绘图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Web服務器端繪圖的基本原理是：首先在內存中創建一個Bitmap位圖，然后在此位圖上繪制任意想要的圖形，繪制完成后保存輸出到頁面的輸出流。這樣，一個頁面就轉換成了繪制的圖片。
1．簡單圖形繪制
新建一個網站，增加一個Web窗體Draw.aspx，在其cs文件頭上增加命名空間引用：
using?System.Drawing;
然后在其cs的Page_Load中繪制圖形。
????protected?void?Page_Load(object?sender,?EventArgs?e)
??? {
????????//?創建位圖，并獲取繪圖設備
????????Bitmap?objBmp =?new?Bitmap(600, 400);
????????Graphics?objGraph =?Graphics.FromImage(objBmp);
?
????????//?背景默認為黑色，用白色清除之
??????? objGraph.Clear(Color.White);
?
????????//?創建繪圖用畫筆和畫刷
????????Pen?pen =?new?Pen(Color.Black);?//?畫筆
????????Brush?fillBrush =?new?SolidBrush(Color.SandyBrown);????//?填充色
????????Brush?textBrush =?Brushes.Black;????????????????????????//?文本顏色
??????? System.Drawing.Font?font =?new?System.Drawing.Font("?宋體"?, 10);?//?繪制文本字體
?
????????//?畫圓
???? ???objGraph.DrawEllipse(pen, 0, 0, 100, 100);
?
????????//?矩形
??????? objGraph.DrawRectangle(pen, 100, 100, 300, 280);
?
????????//?填充矩形
??????? objGraph.FillRectangle(fillBrush, 100, 100, 300, 280);
?
????????//?文字
??????? objGraph.DrawString("?這是一個圓"?, font, textBrush, 0, 0);
??????? objGraph.DrawString("?這是個矩形"?, font, textBrush, 100, 100);
?
????????//?保存
??????? objBmp.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif);
?
????????//?銷毀繪圖設備
??????? objBmp.Dispose();
??????? objGraph.Dispose();
}
這段代碼比較簡單，大家看注釋就明白了，就不一一解釋了，其運行效果如圖1.1所示。
2．在頁面上定位自繪圖形
如果你想再繪圖的Draw.aspx中增加一些按鈕、文本框之類的控件，結果會讓你失望，因為那些控件一個都不能顯示。
之所以出現這種情況，是因為?objBmp.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif);?這句，把輸出流用你保存的gif格式的圖片流覆蓋掉了，增加的那些控件標記根本不在輸出流中，自然無法在瀏覽器中顯示。運行后從瀏覽器中點擊右鍵也可以發現，查看源碼那個菜單是不可用的，而圖片另存則可用，而且是存為gif格式，說明你請求的雖然是Draw.aspx那個窗體，實際到客戶端卻是Draw.gif圖片。
既然客戶端認為Draw.aspx是一個圖片，這也暗示我們這個頁面可以像圖片那樣使用，指明了在頁面中定位的方向。
新建一個aspx頁面，在里面增加一些控件，然后增加一個服務器端控件Image，將其ImageUrl屬性設置為Draw.aspx，運行，可以看到增加的控件和自己繪制的圖形都顯示出來了，而且圖形的位置就是Image控件的位置。
當然，在這個例子中，不使用Image控件，而是用<img src=’Draw.aspx’ />這個Html控件，效果也是一樣的。
3．為自繪制圖形增加鼠標效果
Asp.net 2.0中新增了一個叫ImageMap的控件，該控件可以顯示一個圖片，并設置熱區，鼠標移動到熱區上是變成手狀，點擊熱區后會產生相應的動作。
3.1?設置熱區
我們新建一個Web窗體DrawActive.aspx，并增加一個Label，其Text屬性設置為“點擊圓或矩形，會產生相應動作。”。然后增加一個ImageMap，其ImageUrl屬性設置為“~/Draw.aspx”，表示顯示那個我們自繪的圖形。
點擊HotSpots屬性后面那個集合按鈕，打開HotSpot集合編輯器，如圖3.1所示。在這個控件上增加熱區。
首先增加一個圓形熱區（CircuitHotSpot），我們設定在點擊該圓形后，觸發后臺的一個事件，設定其屬性如下：
| 屬性 | 值 | 說明 |
| Radius | 50 | 半徑 |
| X | 50 | 圓心橫坐標 |
| Y | 50 | 圓心縱坐標 |
| HotSpotMode | PostBack | 熱區類型為回傳 |
| PostBackValue | 點擊圓 | 用于區分回傳的是哪個熱區 |
關于HotSpotMode的取值，有4個可選項：
l?????????NotSet：未設置，同時也是默認項。雖說是未設置，但默認情況是執行定向操作，即鏈接到指定Url，如果未指定Url，則定向到應用程序根目錄。
l?????????Navigete：定向操作，鏈接到指定Url，若不指定Url，定向到應用程序根目錄。
l?????????PostBack：回傳操作，單擊后熱區后觸發ImageMap的Click事件，該事件?ImageMapEventArgs?e?參數記錄了是由ImageMap的哪個熱區觸發的，?e.PostBackValue?即熱區設置的PostBackValue的值。
l?????????Inactive：無操作，實際上就是相當于該區沒有熱區。
由于圓形區域我們定義的是觸發Click事件，因此我們增加ImageMap的Click事件，并輸入如下代碼：
????protected?void?ImageMap1_Click(object?sender,?ImageMapEventArgs?e)
??? {
????????if?(e.PostBackValue ==?"?點擊圓"?)
??????????? Response.Write(@"<script language='javascript'>alert('?點擊了圓');</script>"?);
}
這段代碼通過PostBackValue判斷如果點擊的是圓，則向客戶端寫入一段JavaScript代碼，代碼的作用是彈出一個“點擊了圓”的提示。
下面再增加一個矩形熱區（RectangleHotSpot），我們設定點擊矩形后，彈出我的blog，設定屬性如下：
| 屬性 | 值 | 說明 |
| Top | 100 | 矩形左上角縱坐標 |
| Left | 100 | 矩形左上角橫坐標 |
| Bottom | 280 | 矩形右下角縱坐標 |
| Right | 400 | 矩形右下角橫坐標 |
| HotSpotMode | Navigate | 熱區類型為重定向 |
| Target | _blank | 重定向類型為彈出新窗口 |
| NavigateUrl | http://blog.csdn.net/Ivy_zheng | 重定向Url |
設置完成后源模式下<body>中代碼如下：
<?body?>
????<form?id="form1"?runat="server">
????<div>
????????<asp:Label?ID="Label1"?runat="server"
Text?="?點擊圓或矩形，會有相應的動作。"></?asp?:?Label?>
????????<br?/>
????????<br?/>
????????<asp:ImageMap?ID="ImageMap1"?runat="server"?ImageUrl="~/Draw.aspx"?OnClick="ImageMap1_Click">
????????????<asp:CircleHotSpot?HotSpotMode="PostBack"?PostBackValue="?點擊圓"
Radius?="50"?X="50"?Y="50"?/>
??? ????????<asp:RectangleHotSpot?Bottom="380"?HotSpotMode="Navigate"
Left?="100"?NavigateUrl="http://blog.csdn.net/Ivy_zheng"
Right?="400"?Target="_blank"?Top="100"?/>
????????</asp:ImageMap>
</?div?>
????</form>
</?body?>
好了，運行程序，點擊圓和矩形，看一下效果。注意點擊矩形是彈出窗口，如果你的防火墻阻止彈出窗口，呵呵，解除它才能彈出。
3.2?編程設置熱區
我們上面繪圖用的是常量坐標，如果我們繪制的圖形是從數據庫中讀出的坐標，如流程圖的繪制，這時熱區的坐標也只能從數據庫中讀出，就不能采用上面介紹的直接設置方式，而只能通過編程實現。
下面是編程設置熱區的代碼，這段代碼實現的功能與上面直接設置的熱區在效果上是一樣的。
????protected?void?Page_Load(object?sender,?EventArgs?e)
??? {
????????if?(!IsPostBack)
??????? {
????????????//?圓形熱區
????????????CircleHotSpot?hsCir =?new?CircleHotSpot();
??????????? hsCir.HotSpotMode =?HotSpotMode.PostBack;
??????????? hsCir.PostBackValue =?"?點擊圓"?;
??????????? hsCir.Radius = 50;
??????????? hsCir.X = 50;
??????????? hsCir.Y = 50;
??????????? ImageMap1.HotSpots.Add(hsCir);
?
????????????//?矩形熱區
????????????RectangleHotSpot?hsRect =?new?RectangleHotSpot();
??????????? hsRect.HotSpotMode =?HotSpotMode.Navigate;
??????????? hsRect.NavigateUrl =?"http://blog.csdn.net/Ivy_Zheng";
???????? ???hsRect.Target =?"_blank";
??????????? hsRect.Top = 100;
??????????? hsRect.Left = 100;
??????????? hsRect.Bottom = 380;
??????????? hsRect.Right = 400;
??????????? ImageMap1.HotSpots.Add(hsRect);
??????? }
??? }
總結
以上是生活随笔為你收集整理的Web 绘图—服务器端绘图的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
