Россия |
Опубликован: 07.05.2010 | Уровень: для всех | Доступ: платный
Лекция 15:
Серверные элементы управления
Расширение стандартного HotSpot
Стандартные HotSpot могут генерировать только три разновидности фигур: circle, rectangle и polygon. Это связано с ограничением стандартного HTML-дескриптора <area>, у которого атрибут shape может принимать только одно из трех значений "circle", "rect", "poly". Однако на этой основе можно создать более сложные и разнообразные фигуры, расширяя соответствующим образом класс стандартного HotSpot.
Рассмотрим пример, в котором создадим расширение, способное генерировать активный участок, совпадающий с равнобедренным треугольником. Модель треугольника описывается центральной точкой, шириной и высотой.
-
Создайте новую страницу с разделенным кодом и именем ImageMapExt.aspx
-
Заполните кодовую часть следующим содержимым
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class ImageMapExt : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { lbl = new Label(); form1.Controls.Add(lbl); lbl.Text = String.Empty;// Очистили для тренировки // Подключаем и настраиваем карту изображений ImageMap imageMap = new ImageMap(); imageMap.EnableViewState = false; // Отключили сохранение // состояния вида imageMap.ImageUrl = "~/Images/TriangleHotSpot.png"; imageMap.HotSpotMode = HotSpotMode.PostBack; // Регистрируем обработчик события щелчка imageMap.Click += new ImageMapEventHandler(imageMap_Click1); form1.Controls.Add(imageMap); // Создаем горячую зону в форме треугольника TriangleHotSpot triangle = new TriangleHotSpot(); imageMap.HotSpots.Add(triangle); triangle.Width = 200; triangle.Height = 300; triangle.X = 100; triangle.Y = 150; triangle.PostBackValue = "треугольник"; } Label lbl; void imageMap_Click1(object sender, ImageMapEventArgs e) { lbl.Text = String.Format("Вы щелкнули на фигуре \"{0}\"<br>", e.PostBackValue); } } // Для сохранения значений свойств используем словарь состояния вида public class TriangleHotSpot : System.Web.UI.WebControls.HotSpot { public TriangleHotSpot() { Width = Height = X = Y = 0; this.AlternateText = "Равнобедренный треугольник"; } // Свойства public int Width { get { return (int)ViewState["Width"]; } set { ViewState["Width"] = value; } } public int Height { get { return (int)ViewState["Height"]; } set { ViewState["Height"] = value; } } // Координаты центральной точки треугольника public int X { get { return (int)ViewState["X"]; } set { ViewState["X"] = value; } } public int Y { get { return (int)ViewState["Y"]; } set { ViewState["Y"] = value; } } // Значение атрибута shape дескриптора <area> protected override string MarkupName { get { return "poly"; } } // Значение атрибута coords дескриптора <area> public override string GetCoordinates() { // Координаты верхнего угла int topX = X; int topY = Y - Height / 2; // Координаты левого угла int leftX = X - Width / 2; int leftY = Y + Height / 2; // Координаты правого угла int rightX = X + Width / 2; int rightY = Y + Height / 2; String str = String.Format("{0},{1}", topX, topY); str += "," + String.Format("{0},{1}", leftX, leftY); str += "," + String.Format("{0},{1}", rightX, rightY); return str; } }
Рендеринг страницы будет следующим