Опытно-экспериментальная часть
2.1 Структура учебника
Электронный учебник, представленный в данной работе, имеет структуру глав, представленных на рисунке 3.
Введение в GDI+
Обзор графического рисования
Класс Graphics
Удаление объектов
Система координат
Графические объекты
Области
Цвета
Класс Pen
Класс Brush
Класс Font
Рисование с использованием текстурной кисти
Расширенные возможности GDI+
Рисунок 3. Структура глав.
Некоторые главы содержат подпункты, которые представлены на следующих рисунках:
Графические объекты
Объект Point
Объект Size
Объект Rectangle
Создание графического пути
Объект GraphicsPath
Графические примитивы
Рисунок 4.
Области
Теория
Пример создания области
Рисунок 5.
Цвета
Теория
Практическое занятие
Рисунок 6
Класс Pen
Использование класса Pen
Практическое занятие
Рисунок 7
Класс Brush
Использование класса Brush
Использование кисти
Рисунок 8
Класс Font
Использование класса Font
Практическое занятие
Рисунок 9
Применение текстурной кисти
Теория
Рисование эллипса
Создание пера
Прорисовка текста
Рисунок 10
Расширенные возможности GDI+
Отсечение
Пространство имен System.Drawing.Drawing2D
Пространство имен System.Drawing.Imaging
Рисунок 11
2.2 Описание страниц
Для составления электронного учебного пособия на основе гипертекста для каждого раздела учебника были созданы HTML-страницы. В таблице 1 представлены разделы учебника и соответствующие им HTML-страницы.
Таблица 1.
Заголовок |
Имя страницы |
Введение в GDI+ |
1.html |
Обзор графического рисования |
2.html |
Класс Graphics |
3.html |
Удаление объектов |
4.html |
Система координат |
5.html |
Графические объекты |
6.html |
Объект Point |
6.1.html |
Объект Size |
6.2.html |
Таблица 1. Продолжение. |
|
Объект Rectangle |
6.3.html |
Объект GraphicsPath |
6.4.html |
Создание графического пути |
6.5.html |
Графические примитивы |
6.6.html |
Области |
7.html |
Теория |
7.1.html |
Пример создания области |
7.2.html |
Цвета |
8.html |
Теория |
8.1.html |
Практическое занятие |
8.2.html |
Класс Pen |
9.html |
Использование класса Pen |
9.1.html |
Практическое занятие |
9.2.html |
Класс Brush |
10.html |
Использование класса Brush |
10.1.html |
Использование кисти |
10.2.html |
Класс Font |
11.html |
Использование класса Font |
11.1.html |
Практическое занятие |
11.2.html |
Применение текстурной кисти |
12. .html |
Теория |
12.1.html |
Рисование эллипса |
12.2.html |
Создание пера |
12.3.html |
Прорисовка текста |
12.4.html |
Расширенные возможности GDI+ |
13.html |
Отсечение |
13.1.html |
Пространство имен System.Drawing.Drawing2D |
13.2.html |
Пространство имен System.Drawing.Imaging |
13.3.html |
Шаблон HTML-страниц
Для разработки учебника использовались 2 шаблона страниц.
Главы и подзаголовки электронного учебного пособия имеют различную структуру HTML-кода.
Структура глав:
<html>
<head>
</head>
<body>
<H1>Заголовок страницы</H1>
<p> Заголовок главы</p>
<p> Краткое пояснение главы </p>
<a href="stranica1.html">Ссылка1 (переход по страницам)</a>
<a href="stranica2.html"> Ссылка2(переход по страницам)</a>
……..
<a href="stranicaN.html"> СсылкаN (переход по страницам)</a>
</body>
</html>
Структура подзаголовков:
<html>
<head>
</head>
<body>
<H2>Заголовок страницы</H2>
<p> Заголовок подзаголовка </p>
<p> Содержание HTML-страницы </p>
<a href="stranica.html">Навигация (переход по страницам)</a>
</body>
</html>
1.4 Демонстрационные проекты
Проект COLORS
Проект знакомит с типами, предназначенными для работы с цветом, и обеспечивает следующее:
Определение цвета как комбинации четырех цветовых составляющих;
Инвертирование цветов и вывод цветовых констант;
Отображение оттенков серого цвета;
Вывод цветовых имен;
Форма программы приведена на рисунке 1.
Рисунок 1. Вид формы для проекта COLORS
Код программы COLORS
{public partial class Form1 : Form
{public Form1(){InitializeComponent();
trackBar1_Scroll(null, null);
MinimumSize = Size;}
private void trackBar1_Scroll(object sender, EventArgs e)
{label6.BackColor = Color.FromArgb(trackBar1.Value, trackBar2.Value,
trackBar3.Value, trackBar4.Value);
Color c = label6.BackColor;
label6.ForeColor = Color.FromArgb(0xFF ^ c.R, 0xFF ^ c.G, 0xFF ^ c.B);
string s = c.ToArgb().ToString("X8");
switch (c.A)
{case 0:
s += " Transparent";
break;
case 255:
string
s0 = ColorTranslator.FromWin32(ColorTranslator.ToWin32(c)).Name;
if (s0.Substring(0, 2) != "ff")
s += " " + s0;
break;}
label6.Text = s;}
private void trackBar5_Scroll(object sender, EventArgs e)
{trackBar2.Value = trackBar3.Value = trackBar4.Value = trackBar5.Value;
trackBar1_Scroll(null, null);}}}
Проект Image editor.
Проект Image editor посвящен работе с графической библиотекой GDI+, используемой в .NET-приложениях. В нем рассматриваются и описываются особенности основных графических Классов: Image, Bitmap, Graphics, PictureBox.
В проекте также реализуется отслеживание текущих координат изображения, рисование тонким пером (с использованием классов Pen и Pens) и очистка изображения.
Форма программы приведена на рисунке 2.
Рисунок 2. Вид формы для проекта Image editor.
Некоторые основные обработчики программы Image editor:
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{label1. Text = string. Format ( "X, Y: {0},{1}", e.X, e.Y);
if (e.Button = MouseButtons .Left)
{Graphics g = Graphics.Fromlmage(pictureBox1.Image);
g.DrawLine(pen, startPt, e.Location);
g.Dispose () ; startPt = e.Location;
pictureBox1.Invalidate();}}
private void label2_Click(object sender, EventArgs e)
{colorDialogl.Color = label2.BackColor; if (colorDialogl.ShowDialog() = DialogResult.OK)
label2.BackColor = colorDialogl.Color;}
private void label2_BackColorChanged(object sender, EventArgs e)
{pen.Color = label2.BackColor;}
private void numericUpDownl_ValueChanged(object sender, EventArgs e)
{pen. Width = (int) numericUpDownl. Value ;}
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{movePt = startPt = e.Location;}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{label1.Text = string.Format("X,Y: {0},{1}M, e.X, e.Y);
if (startPt = nullPt) return;
if (e.Button == MouseButtons.Left) switch (mode)
{case 0:
Graphics g = Graphics.Fromlmage(pictureBox1. Image) ;
g.DrawLine(pen, startPt, e.Location);
g.Dispose();
startPt = e.Location;
pictureBox1.Invalidate() ;
break;
case 1:
ReversibleDraw(); movePt = e.Location;
ReversibleDraw(); break;}}
private void DrawFigure(Rectangle r, Graphics g)
{g.FillRectangle(brush, r); g.DrawRectangle(pen, r);}
private Rectangle PtToRect(Point pi, Point p2)
{int x = Math.Min (pi .X, p2.X) ,
у = Math .Min (pi. Y, p2.Y),
w = Math.Abs (p2 .X - pl.X) ,
h = Math.Abs (p2.Y - pl.Y) ;
return new Rectangle(x, у, w, h);}
private void ReversibleDraw()
{Point pi = pictureBox1.PointToScreen(startPt),
p2= pictureBox1.PointToScreen(movePt);
if (mode = 1)
ControlPaint.DrawReversibieLine(pi, p2, Color.Black); else
ControlPaint. DrawReversibleFrame (PtToRect (pi, p2) , Color. Black,
Framestyle. Thick) ;}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{if (startPt == nullPt) return; if (mode >= 1)
{Graphics g = Graphics.Fromlmage(pictureBox1.Image); switch (mode)
{case 1:
g.DrawLine(pen, starrPt, movePt); break; case 2:
DrawFigure(PtToRect(startPt, movePt), g); break;}
g.Dispose ();
pictureBox1.Invalidate();}}
private void textBoxl_Enter(object sender, EventArgs e)
{radioButton4.Checked = true;}
private void button5_Click(object sender, EventArgs e)
{fontDialogl.Font = font;
if (fontDialogl.ShowDialog() = DialogResult.OK)
{Font f = font; textBoxi.Font = font = fontDialogl.Font; f.Dispose();}}