Основы программирования на C#. Простейшие графические возможности

Лабораторная работа № 6

Основы программирования на C#

Простейшие графические возможности

Основы программирования на C# Простейшие графические возможности В пространстве имен System. Drawing? определены основные структуры для представления:

· точки (координат)? Point и PointF

· размера? Size и SizeF

· прямоугольных областей? Rectangle и RectangleF.

Буква F в конце названия структуры означает, что, в отличие от обычных структур (без F), поля структуры имеют не целочисленные значения, а значения вещественного типа (float).

Структура Size

Структура Size предназначена для хранения ширины и высоты объекта и имеет, для этого, соответствующие открытые свойства Width и Height, доступные как для записи, так и для чтения. Для создания объекта Size с нулевыми значениями Width и Height с помощью конструктора по умолчанию, используется следующую запись:

Size sz = new Size ();

Изменить значения свойств в последствии можно, например, следующим образом:

sz.Width = 40;

sz.Height = 60;

Структура содержит два конструктора с аргументами:

public Size (int, int);

public Size (Point);

Конструкторы с аргументами позволяют, в момент создания, инициализировать разные экземпляры структуры по-разному:

Size sz1= new Size (10,20); // sz1. Width = 10, sz1. Height = 20;

Size sz2 = new Size (15,50); // sz2. Width = 15, sz2. Height = 50;

Структура Point

Структура Point содержит открытые свойства X и Y целого типа, доступные, как для записи, так и для чтения.

Для создания точки «pt» можно использовать конструктор по умолчанию:

Point pt = new Point ();

Конструктор по умолчанию при создании точки обнуляет значения свойств X и Y.

В дальнейшем координаты точки можно изменить, например, следующим образом:

pt.X =25;

pt.Y=75;

Инициализировать новую точку класса Point, можно используя, конструкторы с аргументами:

public Point (Size);

public Point (int, int);

Например:

Point pt1 = new Point (10,20); // pt1. X =10, pt1. Y=20

Size szm = new Size (27,45);

Point pt2 = new Point (szm); // pt2. X=27, pt2. Y=45

Метод класса:

public void Offset (int);

изменяет текущие координаты точки по формулам:

X=X+dx и Y=Y+dy;

Структура Rectangle

Структура предназначена для определения координат и размера прямоугольника. Для хранения и изменения координат используются следующие свойства, доступные для записи и чтения:

Location? координата левого верхнего угла прямоугольника

X? определяет x-координату левого верхнего угла прямоугольника;

Y? определяет y-координату левого верхнего угла прямоугольника;

Size? определяет размер прямоугольника;

Height? определяет высоту прямоугольника;

Width? определяет ширину прямоугольника:

Свойства только для чтения:

Left и Top? определяют соответственно X и Y координаты левого верхнего угла прямоугольника;

Right и Bottom? определяют соответственно X и Y координаты правого нижнего угла прямоугольника;

В структуре определены два конструктора с аргументами:

public Rectangle (

int x, // x-координата левого верхнего угла прямоугольника

int y, // y-координата левого верхнего угла прямоугольника

int width, // ширина прямоугольника

int height // высота прямоугольника

);

public Rectangle (

Point location, // координата левого верхнего угла прямоугольника

Size size // размер прямоугольника

);

С помощью этих конструкторов можно определять размеры и местоположение прямоугольников при их создании:

Point pt = new Point (10,15);

Size sz = new Size (50,70);

Rectangle rct = new Rectangle (pt, sz);

Rectangle rect = new Rectangle (20,20,50,30);

Структура Rectangle содержит ряд доступных методов. Рассмотрим некоторые из них.

Метод:

public void Intersect (Rectangle);

Возвращает структуру, которая описывает прямоугольник, представляющий пересечение двух прямоугольников. Если не имеется никакого пересечения, все свойства структуры обнуляются.

Например:

Rectangle rect, rct;

rect = new Rectangle (20,25,50,55);

rct = new Rectangle (10,10,30,40);

rect.Intersect (rct);

выполнение, приведенного фрагмента кода установит значения свойства структуры прямоугольника rect следующим образом:

X=20, Y=25, Width=20, Height=25.

Метод:

public static Rectangle Union (Rectangle a, Rectangle b);

Возвращает структуру, описывающий минимальный по размерам прямоугольник, включающий в себя прямоугольники a и b.

Методы:

public void Offset (Point pos);

public void Offset (int x, int y);

Эти методы смещают координаты левой верхней точки прямоугольника по обеим осям на величину, задаваемую параметрами метода.

программирование графический конструктор прямоугольник Представление цвета Представление цвета осуществляется с помощью экземпляров структуры System.Drawing.Color. Для задания цвета используется статический метод класса:

public static Color. FromArgb (int red, int green, int blue);

Параметры метода red, green и blue задают интенсивность красной, зеленой и синей составляющей цвета. Значение каждой компоненты цвета может изменяться в диапазоне от 0 до 255. Это позволяет отобразить 2²⁴ различных цветов.

Например:

Color crR = Color. FromArgb (255,0,0); // переменная crR? красный цвет

Color crG = Color. FromArgb (0,255, 0); // переменная crG? зеленый цвет

Color crB = Color. FromArgb (0,0,255); // переменная crB? синий цвет Для задания цвета можно также использовать один из перегруженных методов FromArgb:

public static Color FromArgb (int alpha, Color cr);

public static Color FromArgb (int alpha, int red, int green, int blue);

Дополнительный параметр alpha задает степень прозрачности цвета. Чем меньше это число, тем меньше насыщенность цвета и тем более прозрачным является этот цвет. Значение параметра alpha может изменяться в диапазоне от 0 до 255. Значение 0 определяет полностью прозрачный (бесцветный), а значение 255? полностью насыщенный (непрозрачный) цвет.

Структура Color содержит более 200 статических свойств, доступных только для чтения. Эти свойства задают именованные или, так называемые, Интернет? цвета, которые правильно воспроизводятся всеми WEB браузерами.

Пример:

Color clr2 = Color. Beige; // бежевый

Color clr3 = Color. Magenta; // сиреневый

Color clr4 = Color. Orange; // оранжевый

Color clr2 = Color. Crimson; // малиновый Кисти и перья Графические объекты рисуются с помощью перьев и кистей.

Кисти описываются объектами классов, производных от класса System.Drawing.Brush. Класс Brush является абстрактным классом, то есть нельзя создать объект этого класса. Сплошные кисти создаются как экземпляры класса System.Drawing.SolidBrush, например:

Brush br2 = new SolidBrush (Color.Magenta);

Brush br3 = new SolidBrush (Color.FromArgb (200,10,120));

Параметр color конструктора public SolidBrush (Color color);

класса SolidBrush задает цвет сплошной кисти.

В классе System.Drawing.Brushes определено большое количество статических свойств, возвращающих кисть Интернет цветов. Создание таких кистей выглядит следующим образом:

Brush brr = Brushes. Orange;

В классе System.Drawing.Drawing2D.HatchBrush определены штриховые кисти.

Конструкторы класса:

public HatchBrush (HatchStyle hatchstyle, Color foreColor, Color backColor);

public HatchBrush (HatchStyle hatchstyle, Color foreColor);

Параметры:

foreColor? цвет штриха кисти;

backColor? цвет фонового штриха кисти (по умолчанию? черный цвет);

hatchstyle? стиль штриховой кисти.

Существует большое количество доступных стилей, наиболее типичными являются:

Cross? решетчатая кисть;

DiagonalCross? диагональная решетчатая кисть;

Horizontal? горизонтальная штриховка;

Vertical? вертикальная штриховка.

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

Brush br1 = new HatchBrush (HatchStyle.Vertical, Color. Blue, Color. Beige);

Перья описываются классом System.Drawing.Pen.

Конструкторы класса:

public Pen (Color color);

public Pen (Color color, float width);

public Pen (Brush brush);

public Pen (Brush brush, float width);

Параметры:

color? цвет пера;

width? толщина пера;

brush ?кисть.

Примеры создания перьев:

Pen pn = new Pen (Color. Magenta);

Pen pn1 = new Pen (Color.Orange, 5);

Pen pn2 = new Pen (Brushes.Orange);

Pen pn3 = new Pen (Brushes.Magenta, 10);

Pen pn4 = new Pen (Color.FromArgb (125,155, 0));

Pen pn5 = new Pen (Color.FromArgb (25,155,200), 10);

В классе System.Drawing.Pens содержится множество статических свойств, описывающих перья с интернет цветом и толщиной в один пиксель. Создание таких перьев выглядит следующим образом:

Pen pn6 = Pens. Brown;

Pen pn7 = Pens. Magenta;

Рисование линий и фигур

Практически все операции рисования осуществляются с помощью вызовов методов класса .NET System.Drawing.Graphics. Для вывода текстовой и графической информации в окно приложения необходимо получить контекст устройства. Контекст устройства позволяет, используя соответствующие драйверы, выводить информацию в рабочую область окна.

Контекст устройства в среде .NET инкапсулирован («завернут») в базовом классе System.Drawing.Graphics. Для создания объекта класса Graphics необходимо использовать метод CreateGraphics (), возвращающий ссылку на объект класса Graphics:

Graphics dc = CreateGraphics ();

Полученный объект dc содержит контекст устройства, позволяющий осуществлять вывод информации в окно приложения.

Класс Graphics содержит множество методов, позволяющих рисовать различные графические фигуры. Рассмотрим некоторые из них.

Рисование контуров прямоугольников осуществляется с помощью методов:

public void DrawRectangle (Pen pen, Rectangle rect);

public void DrawRectangle (Pen pen, int x, int y, int width, int height);

public void DrawRectangle (Pen pen, float x, float y, float width, float height);

Рисование контуров эллипсов осуществляется с помощью методов:

public void DrawEllipse (Pen pen, Rectangle rect);

public void DrawEllipse (Pen pen, int x, int y, int width, int height);

public void DrawEllipse (Pen pen, float x, float y, float width, float height);

Рисование закрашенных эллипсов и прямоугольников осуществляется с помощью методов:

public void FillEllipse (Brush brush, Rectangle rect);

public void FillEllipse (Brush brush, int x, int y, int width, int height);

public void FillEllipse (Brush brush, float x, float y, float width, float height);

public void FillRectangle (Brush brush, Rectangle rect);

public void FillRectangle (Brush brush, int x, int y, int width, int height);

public void FillRectangle (Brush brush, float x, float y, float width, float height);

Параметры методов означают следующее:

pen? перо;

brush? кисть;

rect? прямоугольник;

х? координата х левого верхнего угла прямоугольника;

y? координата у левого верхнего угла прямоугольника;

width? ширина прямоугольника;

height ?высота прямоугольника;

Рисование линий осуществляется с помощью методов:

public void DrawLine (Pen pen, Point pt1, Point pt2);

public void DrawLine (Pen pen, PointF pt1, PointF pt2);

public void DrawLine (Pen pen, int x1, int y1, int x2, int y2);

public void DrawLine (Pen pen, float x1, float y1, float x2, float y2);

Параметры методов означают следующее:

pen? перо;

pt1? начальная точка рисования;

pt2? конечная точка рисования;

х1 и у1? координаты начальной точки рисования;

х2 и у2? координаты конечной точки рисования;

Примеры использоания функций:

dc.DrawRectangle (Pens.OrangeRed, 5,10,25,45);

dc.DrawEllipse (Pens.Magenta, 100,125,20,15);

dc.FillEllipse (Brushes.BlueViolet, 45,50,20,15);

dc.DrawLine (Pens.Green, 20,40,60,70);

Рисование текста Для рисования текста используют перегруженный метод DrawString. Приведем три из шести перегрузок метода DrawString:

public void DrawString (string s, Font font, Brush brush, PointF point);

public void DrawString (string s, Font font, Brush brush, RectangleF layoutRectangle);

public void DrawString (string s, Font font, Brush brush, float x, float y);

Параметры:

sстрока символов,

font — шрифт текста,

brush — кисть,

point — точка, определяющая координаты вывода текста,

x и y — задают координаты вывода текста

layoutRectangle — прямоугольник, внутри которого выводится текст, если же текст не вмещается в область прямоугольника, то он (текст) обрезается.

Для вывода текста необходимо задать тип и размер шрифта, кисть и координаты текста. Например:

Font fnt = new Font («Arial», 10); //Шрифт Arial, размер 10

dc.DrawString («Привет!», fnt, Brushes. Green, 10,20);

Пример 1. Создадим приложение, которое при щелчке левой кнопкой мыши на окне приложения выводит в месте щелчка прямоугольник с текстом координатами левого верхнего угла прямоугольника, а при щелчке правой кнопкой мыши в месте щелчка выводится закрашенный эллипс.

Для этого создайте проект Windows Application. В окне свойств формы выбрать событие MouseDown, дважды щелкнуть на названии события мышкой. В появившейся заготовке метода-обработчика события вставить код, чтобы тело метода выглядело следующим образом:

private void Form1_MouseDown (object sender, System.Windows.Forms.MouseEventArgs e)

{

Graphics dc = CreateGraphics ();

Font fnt = new Font («Coyrier», 10);

if (e.Button.ToString ()== «Left»)

{

dc.DrawRectangle (Pens.OrangeRed, e. X, e. Y, 15,15);

dc.DrawString («X="+e.X.ToString ()+» Y="+e.Y.ToString (), fnt, Brushes. Green, e. X, e. Y+20);

}

if (e.Button.ToString ()== «Right»)

{

dc.DrawEllipse (Pens.Magenta, e. X, e. Y, 20,15);

dc.FillEllipse (Brushes.Blue, e. X, e. Y, 20,15);

}

}

Скомпилируйте приложение. Проанализируйте полученные результаты.

Задание.

1). Создайте приложение, в котором по нажатию клавиши мыши в месте щелчка выводилось название нажатой клавиши мыши.

2). Создайте приложение, в котором при щелчке на правую кнопку мыши рисовалась линия, соединяющая координату щелчка с левым верхним углом окна приложения.

3). Создайте приложение, в котором выводился след движения мыши (использовать функцию рисования линии).

Перерисовка окна приложения Если свернуть окно приложения из предыдущего примера, затем вновь развернуть его, то мы, к сожалению, заметим, что изображение на поверхности окна исчезло. Операционная система не восстанавливает содержимого окна. Восстановлением графики и текста должно заниматься само приложение. Операционная система в необходимых случаях вырабатывает сообщение (событие Paint), которое «говорит», что окно приложения не корректно и его необходимо перерисовать. Перерисовка окна должна происходить по событию Paint. Метод-обработчик этого события имеет заголовок:

private void Form_Paint (object sender, System.Windows.Forms.PaintEventArgs e)

Для этого метода нет необходимости создавать контекст устройства, он передается методу с помощью параметра e. Для получения контекста устройства необходимо выполнить следующую операцию:

Graphics dc = e. Graphics;

В теле этой функции необходимо выполнить все действия для перерисовки окна.

Очень часто перерисовка окна должна происходить в определенные моменты времени по инициативе приложения. Это бывает необходимо при выводе на экран анимации. «Заставить» операционную систему выработать событие Paint можно путем вызова метода Invalidate (), который является членом System.Windows.Forms.Form. Существуют несколько перегруженных версий этого метода. Одна из них принимает в качестве параметра прямоугольник, который определяет область окна для перерисовки. Используемая нами версия без параметров перерисовывает все окно.

Пример 2. Создадим приложение, в котором при запуске появляется прямоугольник, ширина которого увеличивается через каждые 150мс на 5 пикселей.

1. Объявим в классе Form1 переменную:

private int xWidth;

2. Создадим метод-обработчик события Paint, для этого в свойствах формы выберем событие Paint и щелкнем по нему. После редактирования тела метода, метод должен иметь вид:

private void Form1_Paint (object sender, System.Windows.Forms.PaintEventArgs e)

{

Graphics dc = e. Graphics;

dc.DrawRectangle (Pens.RoyalBlue, 10,100,xWidth, 50);

}

3. Перенесем на форму Timer из Toolbox, затем в свойствах таймера установим свойство Enable в true и Interval в 150.

4. Далее двойным щелчком мыши по таймеру создаем метод-обработчик таймера. После редактирования тела метода, метод должен иметь вид:

private void timer1_Tick (object sender, System. EventArgs e)

{

xWidth += 5;

Invalidate ();

}

Задания:

1). Создать приложение, в котором появляется маленький прямоугольник, который увеличивается (эффект наезда).

2). Создать приложение, в котором в момент создания формы появляются два прямоугольника равных размеров и координат, затем прямоугольники начинают разъезжаться по разным углам окна (по диагонали).

А). Нарисовать минимальный по размеру прямоугольник, включающий в себя оба прямоугольника.

Б). Нарисовать прямоугольник, являющийся пересечением исходных прямоугольников.