Опубликован: 07.05.2010 | Доступ: свободный | Студентов: 1676 / 62 | Оценка: 4.56 / 4.06 | Длительность: 34:11:00
Специальности: Программист, Архитектор программного обеспечения, Разработчик интернет-проектов
Лекция 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;
}
}Рендеринг страницы будет следующим

