Mettre en surbrillance des zones sur l'image dans ASP.Net

Question

J'ai une carte d'un bâtiment et je voudrais mettre en surbrillance par programme des pièces spécifiques en fonction des commentaires des utilisateurs. Je voudrais le faire du côté serveur si possible, et finalement, j'aimerais pouvoir mettre en évidence plusieurs pièces. Pour en savoir plus, cette fonctionnalité est pour une exposition. Les utilisateurs verront les données sur un exposant, cliqueront sur le stand et recevront une carte de la salle avec le (s) stand (s) en surbrillance. Je voudrais également permettre plus tard «bookmarking» des exposants, alors pour que cela vaille la peine, nous devons être en mesure de mettre en évidence facilement un certain nombre de kiosques.

Quelle est la meilleure façon de procéder?

Answer 1

jQuery Map Hilight pourrait avoir ce que vous cherchez si vous avez besoin de ce côté client.

jQuery Map Hilight

Answer 2

Je suppose ici la programmation côté serveur. Je voudrais juste le faire en sauvant l'image originale avec rien en surbrillance, peut-être appelé building.jpg. Ensuite, je créerais des variantes de l'image du bâtiment avec chaque pièce en surbrillance (donc building-room1.jpg, building-room2.jpg), etc. (en utilisant votre logiciel d'édition d'image préféré - MSPaint fonctionnerait bien pour cela). Ensuite, pointez simplement le contrôle Image sur ImageUrl.

Il serait amusant de combiner ceci avec un contrôle Image Map dans ASP.NET 2.0, afin que l'utilisateur puisse cliquer sur la pièce qui l'intéresse et vous pouvez ensuite charger l'image avec cette pièce en surbrillance.

Answer 3

Voici ce qui a vraiment bien fonctionné. Tout d 'abord, la cartographie partielle laide (mais nécessaire) où toutes les cabines sont et stockent les valeurs. Donc, pour le stand 1, nous allons stocker les quatre coins de la zone que nous voulions mettre en évidence.

Sur l'image, nous utilisons une image asp: normale, mais définissons ImageUrl sur BoothMap.ashx, un gestionnaire que nous avons conçu pour dessiner les emplacements de la cabine, en envoyant l'emplacement de la cabine dans la chaîne de requête. Ainsi, il pourrait ressembler à ...

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

Notre gestionnaire ressemble à quelque chose comme ça ...

<%@ 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; 
     } 
    } 
} 

Tout cela fournit le cadre pour nous de mettre en évidence les emplacements de carte dans ASP.Net. Si nous le voulions, nous pourrions facilement modifier le code pour mettre en évidence plusieurs zones de la carte, changer les couleurs, etc.