Мы запустили ТГ-канал по урокам C#

Элемент управления ImageMap

92

ASP.NET --- Веб-сайты ASP.NET --- Элемент управления ImageMap

Обычно веб-страницы содержат сложные графические элементы, приводящие к различным действиям в зависимости от того, на какой части графики выполнен щелчок. Для реализации этой архитектуры разработчики ASP.NET могут использовать несколько приемов:

Элемент управления ImageMap предоставляет серверную абстракцию HTML-дескрипторов <map> и <area>, которая определяет карту изображения. Элемент управления ImageMap визуализируется как дескриптор <map>. Определение областей осуществляется добавлением объектов HotSpot в коллекцию ImageMap.HotSpots, причем каждая область визуализируется в виде дескриптора <area> внутри <map>. Непосредственно перед дескриптором <map> среда ASP.NET помещает связанный дескриптор <img>, который отображает рисунок и использует карту изображения.

Например, если создать карту ImageMap с четырьмя прямоугольными активными зонами, для элемента управления ImageMap будет сгенерирована примерно такая разметка: 

<img id="ImageMap1" src="image.png" usemap="#ImageMapImageMap1" />
<map name="ImageMapImageMap1" id="ImageMapImageMap1">
	<area shape="rect" coords="0,0,144,144" href="" title="" alt="" />
    <area shape="rect" coords="144,0,286,144" href="" title="" alt="" />
    <area shape="rect" coords="144,144,286,286" href="" title="" alt="" />
    <area shape="rect" coords="0,144,144,286" href="" title="" alt="" />
</map>

Создание активных зон

Элементу управления ImageMap можно добавить форму аналогично элементу управлению Image. Достаточно поместить его на страницу и указать в свойстве ImageUrl имя файла изображения, который должен использоваться. Можно также установить обычные свойства ImageAlign, BorderStyle, BorderWidth и BorderColor.

Чтобы определить области, генерирующие события при щелчке, нужно добавить объекты HotSpot в свойство ImageMap.HotSpots. При этом для применения доступны три производных класса CircleHotSpot, RectangleHotSpot и PolygonHotSpot, которые соответствуют трем типам форм, определяемым HTML-кодом.

Необходимо знать точные координаты создаваемой активной зоны. Визуальный конструктор ImageMap в Visual Studio не позволяет определить области. Для этого рекомендуется использовать приложение Expression Web, показанное на рисунке ниже, но подойдет и любая программа авторской разработки HTML-кода:

Конфигурирование активных зон в Microsoft Expression Web

После того как активные зоны полностью определены, для выяснения координат можно обратиться к исходному коду. При определении прямоугольника должны быть заданы его верхний левый и нижний правый углы. Координаты указываются в следующем порядке: X-координата левого края, Y-координата верхнего края, X-координата правого края и Y-координата нижнего края. При определении многоугольника можно задавать любое необходимое количество точек. Браузер вычерчивает линии от одной точки до другой, создавая форму. Стандарт HTML рекомендует завершать определение многоугольника в той же точке, в которой оно было начато.

При создании окружности важно задать следующие параметры: X-координату, Y-координату и радиус. В дескрипторе <area> они указываются в следующем порядке: 

<area shape="circle" coords="272, 83, 83" ...>

В этом примере центр окружности располагается в точке с координатами (272, 83), а радиус равен 83 пикселям. Можно определять перекрывающиеся активные зоны, но обработку щелчка будет выполнять та из них, которая определена первой.

После определения активных зон можно добавить соответствующие объекты HotSpot. Код элемента управления ImageMap, представленного на рисунке выше и содержащего четыре активные зоны, имеет следующий вид: 

<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/image.png">
    <asp:RectangleHotSpot Top="0" Left="0" Bottom="144" Right="144" />
    <asp:RectangleHotSpot Top="0" Left="144" Bottom="144" Right="286" />
    <asp:RectangleHotSpot Top="144" Left="144" Bottom="286" Right="286" />
    <asp:RectangleHotSpot Top="144" Left="0" Bottom="286" Right="144" />
</asp:ImageMap>

Вместо того чтобы писать этот код вручную, можно выбрать нужный элемент управления ImageMap и щелкнуть на многоточии рядом со свойством HotSpots в окне Properties (Свойства). В результате откроется редактор коллекции, в котором можно добавлять и редактировать активные зоны.

По завершении процесса определения активных зон их можно протестировать в браузере. При размещении курсора мыши над активной зоной его изображение изменяется на изображение руки.

Обработка щелчков на активных зонах

Следующий шаг - превращение активных зон в элементы, генерирующие события в результате щелчка. Активная зона может запускать одно из двух действий - переход к новой странице или обратная отправка страницы (и выдавать событие ImageMap.Click).

Чтобы выбрать нужный вариант действия, просто установите свойство ImageMap.HotSpotMode. Когда свойство ImageMap.HotSpotMode установлено, оно применяется ко всем активным зонам. Эту настройку можно переопределить для отдельных активных зон, устанавливая свойство HotSpot.HotSpotMode. В результате некоторые активные зоны могут выполнять обратную отправку страницы, а другие - запускать навигацию по страницам.

Для полного отключения активных зон служит свойство HotSpotMode.Inactive. При использовании свойства HotSpotMode.Navigate для каждой активной зоны должен быть установлен URL-адрес с помощью свойства HotSpot.NavigateUrl. Когда применяется свойство HotSpotMode.PostBack, каждой активной зоне понадобится присвоить уникальное значение в HotSpot.PostBackValue. Это позволяет указать, какая активная зона запускает обратную отправку при генерации события Click.

Модифицированное объявление элемента управления ImageMap, добавляющее эту информацию, выглядит следующим образом: 

<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/image.png"
     HotSpotMode="PostBack" OnClick="ImageMap1_Click">
    <asp:RectangleHotSpot Top="0" Left="0" Bottom="144" Right="144"
         PostBackValue="1" />
    <asp:RectangleHotSpot Top="0" Left="144" Bottom="144" Right="286"
         PostBackValue="2" />
    <asp:RectangleHotSpot Top="144" Left="144" Bottom="286" Right="286"
         PostBackValue="3" />
    <asp:RectangleHotSpot Top="144" Left="0" Bottom="286" Right="144"
         PostBackValue="4" />
</asp:ImageMap>
<br /><br />
<asp:Label ID="Label1" runat="server" />

Обработчик события Click, просто отображающий имя активной зоны, на которой был выполнен щелчок, имеет такой вид: 

protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
        Label1.Text = "Вы выбрали область №" + Int32.Parse(e.PostBackValue);
}

Результирующая страница показана на рисунке ниже:

Обработка щелчка на активной зоне

Специальная активная зона

Элемент управления ImageMap поддерживает любой класс, производный от HotSpot. Платформа ASP.NET включает три таких класса, которые соответствуют основным типам форм <area>, определяемым в стандарте HTML. Однако можно создавать и специальные активные зоны, наследуя новый класс от HotSpot.

Понятно, что класс специальной активной зоны не может выполнять никаких действий, выходящих за рамки стандарта HTML. Например, было бы замечательно располагать эллипсом и другими криволинейными формами, но это просто невозможно. Тем не менее, с использованием типа многоугольника можно строить разнообразные сложные многосторонние формы, такие как треугольники, восьмиугольники, ромбы и т.п. Наследуя специальный класс от HotSpot, можно создавать модель более высокого уровня, которая генерирует соответствующий многоугольник на основе нескольких основных параметров (таких как координаты центра и радиус).

Например, следующий класс представляет простой треугольник. Он создается на основе центральной точки, ширины и высоты: 

using System;
using System.Web.UI.WebControls;

namespace CustomHostSpots
{
    public class TriangleHotSpot : HotSpot
    {
        public TriangleHotSpot()
        {
            Width = 0;
            Height = 0;
            X = 0;
            Y = 0;
        }

        public int Width
        {
            get
            {
                return (int)ViewState["Width"];
            }

            set { ViewState["Width"] = value; }
        }

        public int Height
        {
            get
            {
                return (int)ViewState["Height"];
            }

            set { ViewState["Height"] = value; }
        }

        // X и Y - координаты центральной точки
        public int X
        {
            get
            {
                return (int)ViewState["X"];
            }

            set { ViewState["X"] = value; }
        }

        public int Y
        {
            get
            {
                return (int)ViewState["Y"];
            }
            set { ViewState["Y"] = value; }
        }
        
        // ...
    }
}

При создании специального объекта HotSpot понадобится переопределить свойство MarkupName, чтобы оно возвращало тип создаваемой формы. Допустимыми вариантами являются circle (окружность), rectangle (прямоугольник) и polygon (многоугольник). Эта информация помещается в атрибут shape дескриптора <area>: 

protected override string MarkupName
{
    get { return "polygon"; }
}

И, наконец, должен быть переопределен метод GetCoordinates(), чтобы он возвращал строку атрибута координат. Для многоугольника ею должна быть последовательность разделенных запятыми пар координат X, Y. Код, который создает простой треугольник, имеющий нижний край и единственную точку, расположенную на половинном расстоянии от верхней вершины, выглядит так: 

public override string GetCoordinates()
{
    // Координаты верхней точки
    int topX = X;
    int topY = Y - Height / 2;

    // Координаты нижней левой точки
    int btmLeftX = X - Width / 2;
    int btmLeftY = Y + Height / 2;

    // Координаты нижней правой точки
    int btmRightX = X + Width / 2;
    int btmRightY = Y + Height / 2;

    return topX.ToString() + "," + topY.ToString() + "," + btmLeftX.ToString() + ","
        + btmLeftY.ToString() + "," + btmRightX.ToString() + "," + btmRightY.ToString();
}

Теперь специальную активную зону можно использовать в основном аналогично специальному элементу управления. Прежде всего, понадобится зарегистрировать префикс дескриптора пространства имен: 

<%@ Register TagPrefix="spot" Namespace="CustomHostSpots" %>

Элемент управления ImageMap, который использует объект TriangleHotSpot и перенаправляет пользователя по новому URL-адресу при щелчке на треугольнике, объявляется следующим образом: 

<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/image.png"
    HotSpotMode="PostBack" OnClick="ImageMap1_Click">
    <spot:TriangleHotSpot X="144" Y="144" Height="85" Width="80" PostBackValue="1" />
</asp:ImageMap>
Нестандартный элемент ImageMap
Пройди тесты
Лучший чат для C# программистов