Выделение областей на изображении в ASP.Net

Question

У меня есть карта здания, и я хотел бы программно выделить отдельные комнаты на основе пользовательского ввода.

Я бы хотел сделать это со стороны сервера, если это возможно, и, в конце концов, я бы хотел выделить несколько комнат. Чтобы уточнить больше, эта функция для выставки. Пользователи будут просматривать данные об экспоненте, нажимать на стенд и получать карту зала с выделенным стендом (ами).

Я также хотел бы позже включить «закладку» экспонентов, поэтому, чтобы сделать это полезным, нам нужно иметь возможность легко выделить несколько стендов.

Какой лучший способ сделать это?

Answer 1

jQuery Map Hilight может иметь то, что вы ищете, если вам нужно, чтобы это было на стороне клиента.

jQuery Map Hilight

Answer 2

Вот что получилось очень хорошо.

Во-первых, уродливая (но необходимая) часть - отображение, где находятся все стенды, и сохранение значений. Таким образом, для стенда 1 мы будем хранить четыре угловые точки области, которую мы хотели выделить.

На изображении мы используем обычный asp: image, но для 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. Если бы мы захотели, мы могли бы легко изменить код, чтобы выделить несколько областей карты, изменить цвета и т. Д.

Answer 3

Я предполагаю, что программирование на стороне сервера здесь. Я бы просто сделал это, сохранив исходное изображение, не выделив ничего, возможно, под названием building.jpg. Затем я бы создавал варианты изображения здания с выделением каждой комнаты (например, building-room1.jpg, building-room2.jpg) и т. Д. (Используя ваше любимое программное обеспечение для редактирования изображений - MSPaint отлично подойдет для этого). Затем вы просто указываете элемент управления Image на соответствующий ImageUrl.

Было бы интересно объединить это с Image Map в ASP.NET 2.0, чтобы пользователь мог щелкнуть по интересующей его комнате, а затем загрузить изображение в эту комнату. подсвечен.