Файл: Справочник для опытных и как пособие для начинающих программистов. Компактдиск содержит исходные коды примеров из книги.doc
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 11.01.2024
Просмотров: 928
Скачиваний: 1
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Empty ASP.NET Web Application, назовем его Web-изображение. К текущему проекту добавим HTML-страницу. Для этого в пункте меню Project выберем команду Add New Item и в появившемся окне дважды щелкнем по шаблону HTML Page. Далее на вкладке HTMLPage1.htm введем текст, представленный в листинге 14.4.
Листинг 14.4. Увеличение изображения в Web-форме (HTML-код)
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
alt="Двойной щелчок возвращает в исходный размер"
onclick="this.src='poryv.png’;this.height=200;this.width=200" ondblclick="this.src='poryv.png’;this.height=100;this.width=100" />
html>
На самом деле вводить придется лишь разметку между тегами <body> и body>. Остальной код управляющая среда сгенерировала сама. В приведенной разметке в качестве атрибутов тега <img>, размечающего изображение, записаны две обработки событий onclick (щелчок мышью на изображении) и ondbiclick (двойной щелчок) на JavaScript. Теперь для просмотра этой страницы в браузере мы можем нажать клавишу <F5> или непосредственно открыть файл HTMLPage1.htm, например, в Internet Explorer. При этом мы увидим следующее (рис. 14.11).
Рис. 14.11. Щелчок мышью увеличивает изображение
Теперь решим эту же задачу программированием на Visual С# 2010. Для этого добавим в текущий проект новую Web-форму. В пункте меню Project выполним соманду Add New Item и в появившемся окне выберем шаблон Web Form. На вкладке конструктора формы перетащим из панели Tollbox (эту панель можно вызвать, например, используя комбинацию клавиш <Ctrl>+<Alt>+<X>) из раздела Standard элемент управления изображения Image, а на вкладке программного кода VebForm1.aspx.cs напишем текст, представленный в листинге 14.5.
Листинг 14.5. Увеличение изображения в Web-форме (Visual С# 2010-код)
// На странице имеем изображение - файл poryv.png, при щелчке мышью на нем
// изображение увеличивается вдвое без перезагрузки Web-страницы
using System;
// Другие директивы using удалены, поскольку они не используются
// в данной программе
namespace Web_изoбpaжeниe
{
public partial class WebForm1 : Systern.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Page.Title = "Щелкнуть мышью для увеличения";
// Указываем виртуальный путь к файлу изображения
Image1.ImageUrl = Request.ApplicationPath + "poryv.png";
// Получаем URL, который используется в браузере
string адрес = ResolveClientUrl(Image1.ImageUrl);
// Добавляем атрибут Alt
Image1.AlternateText = "Двойной щелчок возвращает в исходный размер";
// Добавляем два события JavaScript
Image1.Attributes.Add("onclick", "this.src="' + адрес + "';this.height=200;this.width=200"); Image1.Attributes.Add("ondbiclick", "this.src="' + адрес + "’;this.height=100;this.width=100");
}
}
}
Как видно из программного кода, кроме двух очевидных свойств
ImageUrl и AlternateText объекта Image1 свойство Attributes добавляет объекту Image1 два события JavaScript. Нам пришлось включать таким образом события JavaScript, поскольку объект Image1 не имеет событий мыши.
Поставим другую, более интересную задачу. На Web-странице имеем изображение, например, мужчины. Это изображение используем для ссылки на другую Web-страницу, скажем, на WebForm1.aspx. Причем при наведении на него указатетеля мыши происходит смена изображения на изображение женщины. Для решения этой задачи добавим в текущий проект еще одну HTML-страницу на вкладке разметки HTMLPage2.htm напишем текст, приведенный в листинге 14.6.
Листинг 14.6. Смена изображения в Web-форме (HTML-код)
"http://www.w3.оrg/TR/xhtml1/DTD/xhtml1-transitional.dtd">
alt="Щелкните, чтобы перейти на HTMLPage1.htm"
src="m.jpg" border="0" />
Здесь тег <a> обеспечивает гиперссылку на другую Web-страницу HTMLPage1.htm, причем в качестве гиперссылки используется изображение m.jpg (изображение мужчины). Это изображение меняется на изображение женщины (файл g.jpg) при наведении на него указателя мыши (JavaScript-событие onmouseover) и возвращается в исходное, когда указатель мыши покидает элемент (событие onmouseout).
Установим в качестве стартовой страницы проекта файл HTMLPage2.htm. Для этого в контекстном меню окна Solution Explorer для этого файла укажем Set As Start Page. Внешний вид данной Web-страницы в браузере показан на рис. 14.12.
Рис. 14.12. Смена изображения при наведении указателя мыши
Для решения этой же задачи с помощью Visual Studio 2010 в текущий проект дозаявим новую Web-форму — WebForm2.aspx. В конструкторе формы из раздела Standard панели Tollbox добавим элемент управления ImageButton, отображающий изображение и отвечающий на нажатия на нем кнопки мыши. На вкладке программного кода этой формы напишем текст программы, приведенной в листинге 14.7.
Листинг 14.7. Смена изображения в Web-форме (Visual С# 2010-код)
//На Web-странице имеем изображение, например мужчины, - файл m.jpg. Это изображение используем для ссылки
// на другую Web-страницу, например; на WebForm1.aspx. Причем при наведении на него указателя мыши происходит
// смена изображения на изображение женщины - файл g.jpg
using System;
//Другие директивы using удалены, поскольку они не используются вданной программе
namespace Web_изoбpaжeниe
{
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Элемент управления ImageButton отображает изображение и отвечает за нажатия на нем указателя мыши
ImageButton1.PostBackUrl = "WebForml.aspx";
// Указываем виртуальный путь к файлу изображения
ImageButton1.ImageUrl = Request.ApplicationPath + "m.jpg";
// Задаем альтернативный текст
ImageButton1.AlternateText = "Щелкните, чтобы перейти на WebForml.aspx";
// Добавляем два события JavaScript
ImageButton1.Attributes.Add("onmouseover", "this.src='g.jpg’"); ImageButton1.Attributes.Add("onmouseout", "this.src='m.jpg’")!
}
}
}
Как видно из программного кода, мы использовали те же приемы, что и в предыдущей задаче. Убедиться в работоспособности Web-страниц, рассмотренных в данном разделе, можно, открыв соответствующее решение в папке Web_ изображение.
Пример 106. Формирование изображения методами класса Graphics и вывод его в Web-форму
При создании Web-страниц часто бывает удобно сначала создать изображение, что-либо на нем нарисовать, например, график какой-нибудь зависимости, актуальной именно в момент загрузки страницы, затем это изображение записать на диск сервера и вывести его клиенту в обозреватель. Таким графиком может быть, скажем, график статистики посещений сайта по месяцам, по неделям, по дням.
Задача, решаемая в данном разделе, состоит в следующем. Во время загрузки Web-страницы создать изображение, методами класса Graphics вывести на это изображение текстовую строку, представляющую текущую дату. С целью демонстрации возможностей методов Graphics развернуть данную строку на некоторые угол относительно горизонта. Далее сохранить рисунок в текущем каталоге сервера и вывести его на Web-страницу.
Для решения этой задачи запустим Visual Studio 2010, закажем новый проект-шаблона Empty ASP.NET Web Application. Добавим Web-форму, для этого в пункте меню Project выберем команду Add New Item, в появившемся окне укажем шаблон Web Form и добавим его к нашему проекту. На вкладке дизайнера формы WebForm1.aspx добавим элемент управления Image. А на вкладке Web. Forml.aspx.cs введем программный код, представленный в листинге 14.8.
Листинг 14.8. Формирование изображения и вывод его в Web-форму
// Web-страница формирует файл изображения методами класса Graphics. На изображение выводится текстовая
// строка, наклоненная к горизонту на 356 градусов (наклон вверх). Далее этот файл изображения отображается в форме using System;
// Добавляем данное пространство имен для сокращения программного кода:
using System.Drawing;
// Другие директивы using удалены, поскольку они не используются в данной программе
namespace ТекстНаклWeb
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ // Создаем точечное изображение размером 215 х 35 точек с глубиной цвета 24
Bitmap Рисунок = new Bitmap(215, 35, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
// Создаем новый объект класса Graphics из изображения РАСТР
Graphics Графика = Graphics.Fromlmage(Рисунок);
// Теперь становятся доступными методы класса Graphics!
// Заливка поверхности указанным цветом
Графика.Clear(Color.AliceBlue);
// или Графика.Clear(ColorTranslator.FromHtml("#ECECFF"));
// Вывод в строку полной даты:
string Дата = string.Format("Сегодня {0:D}", DateTime.Now);
// Разворачиваем мир на 356 градусов по часовой стрелке
Графика.RotateTrans form(356.OF);
// Выводим на изображение текстовую строку Дата,
// х=5, у=15 - координаты левого верхнего угла строки
Графика.Drawstring(Дата, new Font("Times New Roman", 14, FontStyle.Regular), Brushes.Red, 5, 15);
// Определяем физический путь файла для текущего Web-узла,
// сохраняем изображение в файле risunok.jpg каталога Web-узла Рисунок.Save(Request.PhysicalApplicationPath + "risunok.jpg", System. Drawing. Imaging. ImageFormat. Jpeg) ;
// Возможность вывода изображения в исходящий поток ответа HTTP:
// Рисунок.Save(Response.OutputStream, System.Drawing.
// Imaging.ImageFormat.Jpeg);
// Цвет и ширина рамки рисунка:
Image1.BorderColor = Color.Red; Imagel.BorderWidth = 2;
// Указываем виртуальный путь к файлу изображения
Image1.ImageUrl = Request.ApplicationPath + "risunok.jpg";
// Освобождение ресурсов
Рисунок.Dispose(); Графика.Dispose();
}
}
}
Рис. 14.13. Вывод в форму изображения, сформированного программно
Как видно из программного кода, при загрузке страницы создаем точечное изображение указанного размера, формат Format24bppRgb указывает, что отводится 24 бита на точку: по 8 бит на красный, зеленый и синий каналы. Данное изображение позволяет создать новый объект класса Graphics методом Fromlmage. Теперь разворачиваем поверхность рисования на 356° методом RotateTransform и выводим на поверхность рисования текстовую строку с текущей датой. Задавая физический путь файла изображения, методом Save сохраняем его в каталоге Web-узла в формате JPEG. В комментарии приведена возможность вывода рисунка в исходящий поток ответа
Листинг 14.4. Увеличение изображения в Web-форме (HTML-код)
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
alt="Двойной щелчок возвращает в исходный размер"
onclick="this.src='poryv.png’;this.height=200;this.width=200" ondblclick="this.src='poryv.png’;this.height=100;this.width=100" />
html>
На самом деле вводить придется лишь разметку между тегами <body> и body>. Остальной код управляющая среда сгенерировала сама. В приведенной разметке в качестве атрибутов тега <img>, размечающего изображение, записаны две обработки событий onclick (щелчок мышью на изображении) и ondbiclick (двойной щелчок) на JavaScript. Теперь для просмотра этой страницы в браузере мы можем нажать клавишу <F5> или непосредственно открыть файл HTMLPage1.htm, например, в Internet Explorer. При этом мы увидим следующее (рис. 14.11).
Рис. 14.11. Щелчок мышью увеличивает изображение
Теперь решим эту же задачу программированием на Visual С# 2010. Для этого добавим в текущий проект новую Web-форму. В пункте меню Project выполним соманду Add New Item и в появившемся окне выберем шаблон Web Form. На вкладке конструктора формы перетащим из панели Tollbox (эту панель можно вызвать, например, используя комбинацию клавиш <Ctrl>+<Alt>+<X>) из раздела Standard элемент управления изображения Image, а на вкладке программного кода VebForm1.aspx.cs напишем текст, представленный в листинге 14.5.
Листинг 14.5. Увеличение изображения в Web-форме (Visual С# 2010-код)
// На странице имеем изображение - файл poryv.png, при щелчке мышью на нем
// изображение увеличивается вдвое без перезагрузки Web-страницы
using System;
// Другие директивы using удалены, поскольку они не используются
// в данной программе
namespace Web_изoбpaжeниe
{
public partial class WebForm1 : Systern.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Page.Title = "Щелкнуть мышью для увеличения";
// Указываем виртуальный путь к файлу изображения
Image1.ImageUrl = Request.ApplicationPath + "poryv.png";
// Получаем URL, который используется в браузере
string адрес = ResolveClientUrl(Image1.ImageUrl);
// Добавляем атрибут Alt
Image1.AlternateText = "Двойной щелчок возвращает в исходный размер";
// Добавляем два события JavaScript
Image1.Attributes.Add("onclick", "this.src="' + адрес + "';this.height=200;this.width=200"); Image1.Attributes.Add("ondbiclick", "this.src="' + адрес + "’;this.height=100;this.width=100");
}
}
}
Как видно из программного кода, кроме двух очевидных свойств
ImageUrl и AlternateText объекта Image1 свойство Attributes добавляет объекту Image1 два события JavaScript. Нам пришлось включать таким образом события JavaScript, поскольку объект Image1 не имеет событий мыши.
Поставим другую, более интересную задачу. На Web-странице имеем изображение, например, мужчины. Это изображение используем для ссылки на другую Web-страницу, скажем, на WebForm1.aspx. Причем при наведении на него указатетеля мыши происходит смена изображения на изображение женщины. Для решения этой задачи добавим в текущий проект еще одну HTML-страницу на вкладке разметки HTMLPage2.htm напишем текст, приведенный в листинге 14.6.
Листинг 14.6. Смена изображения в Web-форме (HTML-код)
"http://www.w3.оrg/TR/xhtml1/DTD/xhtml1-transitional.dtd">
alt="Щелкните, чтобы перейти на HTMLPage1.htm"
src="m.jpg" border="0" />
Здесь тег <a> обеспечивает гиперссылку на другую Web-страницу HTMLPage1.htm, причем в качестве гиперссылки используется изображение m.jpg (изображение мужчины). Это изображение меняется на изображение женщины (файл g.jpg) при наведении на него указателя мыши (JavaScript-событие onmouseover) и возвращается в исходное, когда указатель мыши покидает элемент (событие onmouseout).
Установим в качестве стартовой страницы проекта файл HTMLPage2.htm. Для этого в контекстном меню окна Solution Explorer для этого файла укажем Set As Start Page. Внешний вид данной Web-страницы в браузере показан на рис. 14.12.
Рис. 14.12. Смена изображения при наведении указателя мыши
Для решения этой же задачи с помощью Visual Studio 2010 в текущий проект дозаявим новую Web-форму — WebForm2.aspx. В конструкторе формы из раздела Standard панели Tollbox добавим элемент управления ImageButton, отображающий изображение и отвечающий на нажатия на нем кнопки мыши. На вкладке программного кода этой формы напишем текст программы, приведенной в листинге 14.7.
Листинг 14.7. Смена изображения в Web-форме (Visual С# 2010-код)
//На Web-странице имеем изображение, например мужчины, - файл m.jpg. Это изображение используем для ссылки
// на другую Web-страницу, например; на WebForm1.aspx. Причем при наведении на него указателя мыши происходит
// смена изображения на изображение женщины - файл g.jpg
using System;
//Другие директивы using удалены, поскольку они не используются вданной программе
namespace Web_изoбpaжeниe
{
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Элемент управления ImageButton отображает изображение и отвечает за нажатия на нем указателя мыши
ImageButton1.PostBackUrl = "WebForml.aspx";
// Указываем виртуальный путь к файлу изображения
ImageButton1.ImageUrl = Request.ApplicationPath + "m.jpg";
// Задаем альтернативный текст
ImageButton1.AlternateText = "Щелкните, чтобы перейти на WebForml.aspx";
// Добавляем два события JavaScript
ImageButton1.Attributes.Add("onmouseover", "this.src='g.jpg’"); ImageButton1.Attributes.Add("onmouseout", "this.src='m.jpg’")!
}
}
}
Как видно из программного кода, мы использовали те же приемы, что и в предыдущей задаче. Убедиться в работоспособности Web-страниц, рассмотренных в данном разделе, можно, открыв соответствующее решение в папке Web_ изображение.
Пример 106. Формирование изображения методами класса Graphics и вывод его в Web-форму
При создании Web-страниц часто бывает удобно сначала создать изображение, что-либо на нем нарисовать, например, график какой-нибудь зависимости, актуальной именно в момент загрузки страницы, затем это изображение записать на диск сервера и вывести его клиенту в обозреватель. Таким графиком может быть, скажем, график статистики посещений сайта по месяцам, по неделям, по дням.
Задача, решаемая в данном разделе, состоит в следующем. Во время загрузки Web-страницы создать изображение, методами класса Graphics вывести на это изображение текстовую строку, представляющую текущую дату. С целью демонстрации возможностей методов Graphics развернуть данную строку на некоторые угол относительно горизонта. Далее сохранить рисунок в текущем каталоге сервера и вывести его на Web-страницу.
Для решения этой задачи запустим Visual Studio 2010, закажем новый проект-шаблона Empty ASP.NET Web Application. Добавим Web-форму, для этого в пункте меню Project выберем команду Add New Item, в появившемся окне укажем шаблон Web Form и добавим его к нашему проекту. На вкладке дизайнера формы WebForm1.aspx добавим элемент управления Image. А на вкладке Web. Forml.aspx.cs введем программный код, представленный в листинге 14.8.
Листинг 14.8. Формирование изображения и вывод его в Web-форму
// Web-страница формирует файл изображения методами класса Graphics. На изображение выводится текстовая
// строка, наклоненная к горизонту на 356 градусов (наклон вверх). Далее этот файл изображения отображается в форме using System;
// Добавляем данное пространство имен для сокращения программного кода:
using System.Drawing;
// Другие директивы using удалены, поскольку они не используются в данной программе
namespace ТекстНаклWeb
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ // Создаем точечное изображение размером 215 х 35 точек с глубиной цвета 24
Bitmap Рисунок = new Bitmap(215, 35, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
// Создаем новый объект класса Graphics из изображения РАСТР
Graphics Графика = Graphics.Fromlmage(Рисунок);
// Теперь становятся доступными методы класса Graphics!
// Заливка поверхности указанным цветом
Графика.Clear(Color.AliceBlue);
// или Графика.Clear(ColorTranslator.FromHtml("#ECECFF"));
// Вывод в строку полной даты:
string Дата = string.Format("Сегодня {0:D}", DateTime.Now);
// Разворачиваем мир на 356 градусов по часовой стрелке
Графика.RotateTrans form(356.OF);
// Выводим на изображение текстовую строку Дата,
// х=5, у=15 - координаты левого верхнего угла строки
Графика.Drawstring(Дата, new Font("Times New Roman", 14, FontStyle.Regular), Brushes.Red, 5, 15);
// Определяем физический путь файла для текущего Web-узла,
// сохраняем изображение в файле risunok.jpg каталога Web-узла Рисунок.Save(Request.PhysicalApplicationPath + "risunok.jpg", System. Drawing. Imaging. ImageFormat. Jpeg) ;
// Возможность вывода изображения в исходящий поток ответа HTTP:
// Рисунок.Save(Response.OutputStream, System.Drawing.
// Imaging.ImageFormat.Jpeg);
// Цвет и ширина рамки рисунка:
Image1.BorderColor = Color.Red; Imagel.BorderWidth = 2;
// Указываем виртуальный путь к файлу изображения
Image1.ImageUrl = Request.ApplicationPath + "risunok.jpg";
// Освобождение ресурсов
Рисунок.Dispose(); Графика.Dispose();
}
}
}
Рис. 14.13. Вывод в форму изображения, сформированного программно
Как видно из программного кода, при загрузке страницы создаем точечное изображение указанного размера, формат Format24bppRgb указывает, что отводится 24 бита на точку: по 8 бит на красный, зеленый и синий каналы. Данное изображение позволяет создать новый объект класса Graphics методом Fromlmage. Теперь разворачиваем поверхность рисования на 356° методом RotateTransform и выводим на поверхность рисования текстовую строку с текущей датой. Задавая физический путь файла изображения, методом Save сохраняем его в каталоге Web-узла в формате JPEG. В комментарии приведена возможность вывода рисунка в исходящий поток ответа