在ASP.Net中突出顯示圖像上的區域

Question

我有一個建築物的地圖，我想以編程方式突出顯示基於用戶輸入的特定房間。

如果可能的話，我想從服務器端做到這一點，最終我希望能夠突出顯示多個房間。詳細說明，這個功能是用於展覽的。用戶將查看有關參展商的數據，點擊展位，並將展示大廳的地圖並突出顯示展位。

我還想稍後啓用參展商的'書籤'功能，所以爲了讓我們有價值，我們需要能夠輕鬆突出展位的數量。

這是什麼最好的方法呢？

Answer 1

jQuery地圖Hilight可能有你要找的東西，如果你需要這是客戶端。

jQuery Map Hilight

Answer 2

我在這裏假設服務器端編程。我只是通過保存沒有突出顯示的原始圖像來實現，也許稱爲building.jpg。然後我會創建各個房間的變體圖像（例如building-room1.jpg，building-room2.jpg）等等（使用您最喜歡的圖像編輯軟件--MSPaint可以很好地工作）。然後，您只需將Image控件指向適當的ImageUrl。

在ASP.NET 2.0中將它與Image Map控件結合起來很有趣，因此用戶可以點擊他們感興趣的房間，然後可以加載突出顯示的房間的圖像。

Answer 3

下面是結果很好的結果。

首先，醜陋的（但必要的）部分映射，其中所有的展位都是並存儲值。因此，對於booth1，我們將存儲我們想突出顯示的區域的四個角點。

在圖像上，我們使用一個普通的asp：圖像，但將ImageUrl設置爲BoothMap.ashx，這是我們設計用於繪製展位位置的處理程序，在查詢字符串中的展位位置發送。因此，它可能看起來像......

<asp:Image ID="imgBoothMap" ImageUrl="BoothMap.ashx?ID=A1" runat="server" /> 

我們的處理看起來是這樣的......

<%@ WebHandler Language="C#" Class="BoothMap" %> 

using System.Drawing; 
using System.Drawing.Imaging; 
using System.Web; 

public class BoothMap : IHttpHandler { 

    public void ProcessRequest (HttpContext context) { 

     context.Response.ContentType = "image/jpg"; 

     //load booth corners 
     Point[] points = GetBoothCorners(context.Request.QueryString["ID"]); 

     Image curImage = Image.FromFile(@"C:\BoothMap.jpg"); 
     Graphics g = Graphics.FromImage(curImage); 
     Pen transPen = new Pen(Color.FromArgb(128, 132, 112, 255), 10); 
     Brush transBrush = new SolidBrush(Color.FromArgb(128, 132, 112, 255)); 
     g.FillPolygon(transBrush, points); 
     curImage.Save(context.Response.OutputStream, ImageFormat.Jpeg); 
     g.Dispose(); 
     curImage.Dispose(); 
     context.Response.End(); 
    } 

    public bool IsReusable { 
     get { 
      return true; 
     } 
    } 
} 

所有這一切提供了框架，我們強調在ASP.Net地圖位置。如果我們想要，我們可以很容易地修改代碼以突出顯示地圖的多個區域，更改顏色等。