Как рисовать в c

23.0. Графика в c#

разработать программы, которые выводят графику на поверхность объекта.

В ИСР C# Express позволяет загружать файлы – рисунки, созданные в других программах, например Paint, Corel Draw и др.

23.1. Рисованные изображения

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

Изображение при этом представляет собой комбинацию простейших фигур – графических примитивов (точка, линия, круг или прямоугольник).

Каждая точка на форме имеет координаты XиY. Текущая позиция при рисовании определяется горизонтальной (X) и вертикальной (Y) координатами, заданными в пикселях. Координата Х возрастает при перемещении указателя слева на право, а координатаY– при перемещении его сверху вниз.

Объект Graphics

Объект Graphics – это указатель на место, где будут рисоваться примитивы. Пусть мы хотим рисовать в форме Windows. Синтаксис задания ссылки на нее:

Graphics g = Graphics.FromHwnd(this.Handle);

Graphics – тип объекта,

g – имя переменной,

Graphics.FromHwnd(this.Handle) — используемый метод FromHwnd из класса Graphics, который задает ссылку Handle на форму Windows.

В С# инструменты рисования определены в пространстве имен System.Drawing. Там находятся классы:

Pen (перо). Объекты пера используются в методах рисования линий и контуров геометрических фигур.

Brush (кисть). Объекты кисти используются в методах заливки областей, ограниченных контурами.

Перо (Pen)

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

Объекты Pen выбираются из класса Pens (перья). Класс Pens содержит набор объектов для выбора. У них толщина линии (1 пиксель), стиль линии – сплошная. У каждого объекта свой цвет линии, имя которого идентифицирует объект. Такой объект нельзя редактировать, его можно только применять.

Например, создаем объект myPen, совпадающий с шаблоном:

Pen myPen = Pens.Black;

Объекты Pen с изменяемыми свойствами создаются из класса Pen (перо). В этом случае для объекта пера можно устанавливать много свойств. Основные свойства:

Color – цвет линии;

Brush – ссылка на кисть, используемую в качестве пера ;

Width – толщина линии;

DashStyle – стиль штриховой линии,

DotStyle – стиль пунктирной линии

DashDotStyle – штрих пунктир,

DashDotDotStyle — штрих двойной пунктир,

SolidStyle– стиль непрерывная линия.

Сначала объект myPen можно создать с указанием цвета.

Pen myPen = new Pen(Color.Red);

Затем ему можно изменить свойства:

Можно задать и красиво пишущее перо, в нем перо это кисть.

Pen myFancyPen = new Pen(myBrush);

Кисть (Brush)

Объекты кисти используются в методах заливки графических фигур. Определены кисти разного типа:

Brush – простая кисть, одноцветная заливка.

HatchBrush – кисть со штриховой заливкой.

LinearGradientBrush – кисть с линейной градиентной заливкой, цвет фрагментов фигуры меняется плавно.

PathGradientBrush – кисть с градиентной заливкой, цвет фрагментов фигуры меняется скачкообразно.

Объекты Brush выбираются из класса Brushes, который содержит кисти со сплошной заливкой. Класс Brushes содержит набор объектов для выбора, у которых по умолчанию определен цвет. У каждого объекта выбора имя – это цвет заливки. Например, создаем объект myBrush, совпадающий с шаблоном:

Brush myBrush = Brushes.Blue; // Заливка синим

Примеры нарисованных графиков:

Объекты HatchBrush выбираются из класса HatchBrushes. Класс HatchBrushes содержит набор объектов для выбора, у которых по умолчанию определены стиль заливки HatchStyle, цвет переднего плана ForeColor и цвет фона BackColor (задний план). Определены стили заливки:

Как рисовать в c

Фигуры представляют один из способов построения простейшей двухмерной графики и фактически являются обычными элементами как, к примеру, кнопка. К фигурам относятся Polygon (многоугольник), Ellipse (эллипс), Rectangle (прямоугольник), Line (простая линия), Polyline (несколько линий), Path (геометрический путь). Все они наследуются от абстрактного класса Shape , который определяет ряд общих свойств:

Fill : заполняет фон фигуры с помощью кисти аналогично свойству Background у других элементов

Stroke : устанавливает кисть, которая отрисовывает границу фигуры

StrokeThikness : задает толщину границы фигуры

StrokeStartLineCap и StrokeEndLineCap : создают для незамкнутых фигур (Line) контур в начале и в конце линии соответственно

StrokeDashArray : задает границу фигуры в виде штриховки, создавая эффект пунктира

StrokeDashOffset : задает расстояние до начала штриха

StrokeDashCap : задает форму штрихов

Ellipse

Ellipse представляет овал:

При одинаковой ширине и высоту получается круг:

Rectangle

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

Line представляет простую линию. Для создания линии надо указать координаты в ее свойствах X1, Y1, X2 и Y2. При этом надо учитывать, что началом координатной системы является верхний левый угол:

Polygon

Polygon представляет многоугольник. С помощью коллекции Points элемент устанавливает набор точек — объектов типа Point , которые последовательно соединяются линиями, причем последня точка соединяется с первой:

В данном случае у нас три точки (50, 150), (150, 50) и (250, 150), которые образуют треугольник.

Polyline

Polyline представляет набор точек, соединенных линиями. В этом плане данный элемент похож на Polygon за тем исключением, что первая и последняя точка не соединяются:

Элемент Path предназначен для создания сложных геометрических путей. Класс Path имеет свойство Data , которое определяет объект Geometry — геометрический объект для отрисовки. Этот объект задает фигуру или совукупность фигур для отрисовки.

Geometry является абстрактным классом, поэтому в качестве объекта используется один из производных классов:

LineGeometry представляет линию, эквивалент фигуры Line

RectangleGeometry представляет прямоугольник, эквивалент фигуры Rectangle

EllipseGeometry представляет овал, эквивалент фигуры Ellipse

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

GeometryGroup создает фигуру, состоящую из нескольких объектов Geometry

Например, создадим набор фигур:

Номинально здесь три фигуры: линия, овал и прямоугольник. Однако так как они объединены в один путь, то мы можем управлять ими как единым целым.

Свойство FillRule позволяет установить режим закрашивания фигур в геометрическом пути. Если он равен EvenOdd , то (значение по умолчанию), то перекрывающие поверхности являются прозрачными. Если же установить FillRule=»Nonzero» , то перекрывающиеся поверхности геометрий будут окрашены также, как и остальные части пути. Цвет в данном случае определяется свойством Fill класса Path.

PathGeometry

PathGeometry содержит один или несколько компонентов PathFigure . Объект PathFigure в свою очередь формируется из сегментов. Все сегменты наследуются от класса PathSegment и бывают нескольких видов:

LineSegment задает отрезок прямой линии между двумя точками

ArcSegment задает дугу

BezierSegment задает кривую Безье

QuadraticBezierSegment задает квадратичную кривую Безье

PolyLineSegment задает сегмент из нескольких линий

PolyBezierSegment задает сегмент из нескольких кривых Безье

PolyQuadraticBezierSegment задает сегмент из нескольких квадратичных кривых Безье

Эти сегменты составляют свойство Segment объекта PathFigure. Кроме того, PathFigure имеет еще несколько важных свойств:

StartPoint — точка начала первой фигуры

IsClosed — если значение равно true, то первая и последняя точки (если они не совпадают) соединяются

IsFilled — если значение равно true, то площадь внутри пути окрашивается кистью, заданной свойством Fill у объекта Path

Существует также сокращенный вариант записи сегментов путей. Так, следующее описание пути:

можно написать следующим образом:

Что в данном случае означате сокращенная запись?

Создает новый объект PathFigure и указывает на его начальную точку

Завершает фигуру и устанавливает свойство IsClosed в true. Если же не требуется завершать фигуру, то вместо Z употребляется буква M

Двумерная графика на C#, классы Graphics, Pen и Brush

На примере графики наглядно видны преимущества ООП, смысл использования классов, их методов и свойств. Добавляя в пространство имен своего проекта соответствующие библиотеки, вы получаете сразу набор инструментов, необходимых для графики. Это графические примитивы (линии, прямоугольники, эллипсы и т.п.), перо для черчения, кисть для закраски и много других полезных объектов и методов.

2D-графика делится, как вы знаете, на растровую и векторную. Растровое изображение — это набор цветных пикселей, заданных в прямоугольной области, хранящихся в файлах *.bmp, *.jpg, *.png и т.п. Самый простой растровый редактор — программа Paint. Векторная графика намного экономнее (по объемам памяти) растровой. Так для рисования прямоугольника достаточно задать координаты двух точек (левого верхнего и правого нижнего углов) и цвет и толщину линии. В этом разделе в основном рассмотрим методы векторной графики.

Пространство имен System.Drawing (Рисование) обеспечивает доступ к функциональным возможностям графического интерфейса GDI+ , используя около 50 (!) классов, в том числе класс Graphics. Чуть позже мы будем использовать дополнительные пространства имен System.Drawing.Drawing2D, System.Drawing.Imaging, System.Drawing.Printing, System.Drawing.Text, расширяющие функциональные возможности библиотеки System.Drawing.

Класс Graphics предоставляет методы рисования на устройстве отображения (другие термины — графический контекст, «холст»). Определимся сразу, на чем мы хотим рисовать. Далее в примерах он обозначается как объект g.

Способы задания «холста»

1. Графический объект — «холст» для рисования на форме Form1 (указатель this) можно задать, например, одним оператором:
Graphics g = this.CreateGraphics();
Примечание. Заметим, что стандартным образом
Graphics g = new Graphics();
создать объект-холст не удается.
На этом операторе генерируется ошибка:
Для типа «System.Drawing.Graphics» не определен конструктор.

2. Еще пример задания графического контекста на визуальном компоненте PictureBox (ящик для рисования) через растровый объект класса Bitmap. В классе Form1 зададим два объекта:
Graphics g; // графический объект — некий холст
Bitmap buf; // буфер для Bitmap-изображения
В конструктор Form1() добавим следующие операторы:
buf = new Bitmap(pictureBox1.Width, pictureBox1.Height); // с размерами
g = Graphics.FromImage(buf); // инициализация g

3. В принципе, иногда (если все графические операции выполняются внутри одной функции) эти четыре строки могут быть заменены одной строкой:
Graphics g = Graphics.FromImage(new Bitmap(pictureBox1.Width, pictureBox1.Height));
После этого можно задать фон холста белым:
g.Clear(Color.White);

4. Еще один пример задания «холста» на форме через дескриптор окна:
Graphics g = Graphics.FromHwnd(this.Handle);
Далее в примерах конкретизируются эти способы.

Объекты других классов из библиотеки System.Drawing

Такие классы, как Rectangle (прямоугольник) и Point (точка) инкапсулируют элементы GDI+. Отметим, что Point вообще то является структурой (struct) с полями x,y. Это уточнение несущественно, так как в C# структуры похожи на классы, a инициализация объекта-структуры point может выглядеть так же, как инициализация объекта-класса:
Point point= new Point();

Класс Pen (перо) используется для рисования линий и кривых, а классы, производные от класса Brush (кисть) используются для закраски замкнутых контуров (см. ниже).

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

Класс Image – абстрактный базовый класс предоставляет функциональные возможности для производных классов Bitmap и Metafile. Bitmap используется для работы с пиксельными изображениями (см. выше пример). Metafile определяет графический метафайл, содержащий записи, описывающие последовательность графических операций, которые могут быть записаны (созданы) и воспроизведены (отображается). Этот класс не наследуется.

Класс Graphics

Он инкапсулирует поверхность рисования GDI+. Этот класс не наследуется. Методов в этом классе огромное количество, поэтому сначала представим их в таблице, а затем рассмотрим некоторые из них с примерами и пояснениями.
В третьем столбце таблицы указывается число перегрузок метода, различающихся набором параметров (используйте интеллектуальную подсказку IntelliSense для выбора нужного Вам варианта метода).

Имя метода	Описание	Число перегрузок
Clear(Color)	Очищает всю поверхность рисования и выполняет заливку поверхности указанным цветом фона.	1
CopyFromScreen(Point, Point, Size)	Выполняет передачу данных о цвете, соответствующих прямоугольной области пикселей, блоками битов с экрана на поверхность рисования объекта Graphics.	4
Dispose()	Освобождает все ресурсы, используемые данным объектом Graphics.	1
DrawArc(Pen, Rectangle, Single, Single)	Рисует дугу, которая является частью эллипса, заданного структурой Rectangle.	4
DrawBezier(Pen, Point, Point, Point, Point)	Рисует кривую Безье, определяемую четырьмя структурами Point.	3
DrawBeziers(Pen, Point[])	Рисует несколько (N) кривых Безье, определяемых массивом из (3N+1) структур Point.	2
DrawCloseCurve(Pen, Point[ ])	Рисует замкнутый фундаментальный сплайн	4
DrawEllipse(Pen, Rectangle)	Рисует эллипс	4
DrawIcon(Icon, Rectangle)	Рисует значок	2
DrawImage(Image image, int x, int y)	Рисует заданное изображение image, используя его фактический размер в месте с координатами (x,y)	30
DrawLine(Pen, Point, Point)	Проводит линию, соединяющую две структуры Point.	4
DrawLines(Pen, Point[ ])	Рисует набор сегментов линий, которые соединяют массив структур Point.	2
DrawPath(Pen, gp)	Рисует пером Pen объект GraphicsPath gp.	1
DrawPie(Pen, Rectangle, Single, Single)	Рисует сектор, который определяется эллипсом, заданным структурой Rectangle и двумя радиалtьными линиями.	4
DrawPolygon(Pen, Point[])	Рисует многоугольник, определяемый массивом структур Point.	2
DrawRectangle(Pen, Rectangle)	Рисует прямоугольник, определяемый структурой Rectangle.	3
DrawRectangles(Pen, Rectangle[])	Рисует набор прямоугольников, определяемых структурами Rectangle.	2
DrawString(String, Font, Brush, PointF)	Создает указываемую текстовую строку в заданном месте с помощью определяемых объектов Brush и Font.	6
Equals(Object)	Определяет, равен ли заданный объект текущему объекту. (Унаследовано от Object.)	1
ExcludeClip(Rectangle)	Обновляет вырезанную область данного объекта Graphics, чтобы исключить из нее часть, определяемую структурой Rectangle.	1
ExcludeClip(Region)	Обновляет вырезанную область данного объекта Graphics, чтобы исключить из нее часть, определяемую структурой Region.	1
FillClosedCurve(Brush, Point[])	Заполняет внутреннюю часть замкнутой фундаментальной кривой, определяемой массивом структур Point.	6
FillEllipse(Brush, Rectangle)	Заполняет внутреннюю часть эллипса, определяемого ограничивающим прямоугольником, который задан структурой Rectangle.	4
FillPath(Brush, GraphicsPath)	Заполняет внутреннюю часть объекта GraphicsPath.	1
FillPie(Brush, Rectangle, Single, Single)	Заполняет внутреннюю часть сектора, определяемого эллипсом, который задан структурой RectangleF, и двумя радиальными линиями.	3
FillPolygon(Brush, Point[])	Заполняет внутреннюю часть многоугольника, определяемого массивом точек, заданных структурами Point.	4
FillRectangle(Brush, Rectangle)	Заполняет внутреннюю часть прямоугольника, определяемого структурой Rectangle.	4
FillRegion(Brush, Region)	Заполняет внутреннюю часть объекта Region.	1
Flush()	Вызывает принудительное выполнение всех отложенных графических операций и немедленно возвращается, не дожидаясь их окончания.	2
IntersectClip(Region)	Обновляет вырезанную область данного объекта, включая в нее пересечение текущей вырезанной области и указанной структуры	3
ResetClip()	Сбрасывает выделенную область g, делая ее бесконечной	1

Подробнее еще о двух классах.

Класс Pen

Класс Pen определяет объект, используемый для рисования прямых линий и кривых. Этот класс не наследуется. Конструкторы класса (тоже пример перегрузки методов):
1) Pen(Color) инициализирует новый экземпляр класса Pen с указанным цветом.
2) Pen(Color, Single) инициализирует новый экземпляр класса Pen с указанными свойствами Color и Width. (Width — устанавливает ширину пера Pen, в единицах объекта Graphics, используемого для рисования
Например:
Pen redPen = new Pen(Color.Red); // толщина пера по умолчанию 1 пиксель
или используя промежуточную переменную green
Color green = Color.Green;
Pen greenPen = new Pen(green, 4.5f);
Можно вводить новый объект без указания явного имени пера (пример создания динамического объекта — пера):
g.DrawRectangle(new Pen(Color.Red, 3), r);
например, для рисования прямоугольника r красным пером толщиной 3 пикселя, используя графический контекст («холст») g.

Класс Brush

Класс Brush определяет объекты, которые используются для заливки внутри графических фигур, таких как прямоугольники, эллипсы, круги, многоугольники и дорожки. Это абстрактный базовый класс, который не может быть реализован. Для создания объекта «кисть» используются классы, производные от Brush, такие как SolidBrush, TextureBrush и LinearGradientBrush, например:
SolidBrush br = new SolidBrush(Color.Aqua);
g.FillRectangle(br, r); // закраска прямоугольника r на «холсте» g
Или без явного объявления объекта «кисть» br:
g.FillRectangle(new SolidBrush(Color.Red), r);

Для первоначального привыкания к стилю ООП в графике рассмотрим первый пример рисования.

NEW: Наш Чат, в котором вы можете обсудить любые вопросы, идеи, поделиться опытом или связаться с администраторами.

Drawing Graphics in C Sharp

The purpose of this chapter of C# Essentials is to provide the reader with knowledge of the basics of graphics drawing in C#. Drawing in C# is achieved using the Graphics Object. The Graphics Object takes much of the pain out of graphics drawing by abstracting away all the problems of dealing with different display devices and screens resolutions. The C# programmer merely needs to create a Graphic Object and tell it what and where to draw.

Contents

Persistent Graphics

An important point to note before proceeding with is chapter is that simply creating a Graphics Object for a component and then drawing on that component does not create persistent graphics. In fact what will happen is that as soon as the window is minimized or obscured by another window the graphics will be erased.

For this reason, steps need to be taken to ensure that any graphics are persistent. Two mechanisms are available for achieving this. One is to repeatedly perform the drawing in the Paint() event handler of the control (which is triggered whenever the component needs to be redrawn), or to perform the drawing on a bitmap image in memory and then transfer that image to the component whenever the Paint() event is triggered. We will look at redrawing the graphics in the Paint() event in this chapter and Using Bitmaps for Persistent Graphics in C# in the next chapter.

report this ad

Creating a Graphics Object

The first step in this tutorial is to create a new Visual Studio project called CSharpGraphics. With the new project created select the Form in the design area and click on the lightning bolt at the top of the Properties panel to list the events available for the Form. Double click the Paint event to display the code editing page.

Graphics Objects are created by calling the CreateGraphics() method of the component on which the drawing is to performed. For example, a Graphics Object can be created on our Form called Form1 by calling CreateGraphics() method as follows in the Paint() method:

Now that we have a Graphic Object we need a Pen with which to draw.

Creating a Pen In C#

A Graphics Object is of little use without a Pen object with which to draw (much as a sheet of paper is no good without a pen or pencil). A Pen object may be quite easily created as follows:

Pen variable_name = new Pen (color, width);

where variable_name is the name to be assigned to the Pen object, color is the color of the pen and width is the width of the lines to be drawn by the pen.

For example, we can create red pen that is 5 pixels wide as follows:

Once a Pen object has been created other properties may be changed. For example, the DashStyle property can be modified to change the style of line (i.e Dash, DashDot, DashDotDot, Dot, Solid or Custom). Properties such as the color and width may similarly be changed after a Pen has been created:

Now that we have a Paint() event handler, a Graphics Object and Pen we can now begin to draw.

Drawing Lines in C#

Lines are drawn in C# using the DrawLine() method of the Graphics Object. This method takes a pre-instantiated Pen object and two sets of x and y co-ordinates (the start and end points of the line) as arguments. For example, to draw a line from co-ordinates (20, 20) to (200, 210) on our sample form:

The above code, when compiled and executed will result in the form appearing as follows:

Drawing Squares and Rectangles in C#

For the purposes of drawing rectangles and squares in C# the GraphicsObject provides the DrawRectangle() method. There are two ways to use the DrawRectangle() method. One is to pass through a Rectangle object and Pen and the other is to create an instance of a Rectangle object and pass that through along with the Pen. We will begin by looking at drawing a rectangle without a pre-created Rectangle object. The syntax for this is:

graphicsobj.DrawRectangle(pen, x, y, width, height);

The alternative is to pass through a Rectangle object in place of the co-ordinates and dimensions. The syntax for creating a Rectangle object in C# is as follows:

Rectangle rectangleObj = new Rectangle (x, y, width, height);

Once a Rectangle object has been instantiated the syntax to call DrawRectangle() is as follows:

graphicsobj.DrawRectangle(pen, x, y, rectangleobj);

The following example creates a Rectangle which is then used as an argument to DrawRectangle():

When an application containing the above code is compiled and executed the following graphics will appear in the form:

If multiple rectangles of different shapes need to be drawn it is not necessary to create a new Rectangle object for each call to the DrawRectangle(); method. Instead the shape of an existing Rectangle object may be altered by calling the Inflate() method of the Rectangle class. This method accepts two arguments, the amount by which the width is to be changed and the amount by which the height is to be changed. If a dimension is to be left unchanged 0 should be passed through as the change value.

To reduce a dimension pass through the negative amount by which the dimension is to be changed:

Drawing Ellipses and Circles in C#

Ellipses and circles are drawn in C# using the DrawEllipse() method of the GraphicsObject class. The size of the shape to be drawn is defined by specifying a rectangle into which the shape must fit. As with the DrawRectangle() method, there are two ways to use the DrawEllipse() method. One is to pass through a Rectangle object and Pen and the other is to create an instance of a Rectangle object and pass that through along with the Pen.

To draw an ellipse without first creating a Rectangle object use the following syntax:

graphicsobj.DrawEllipse(pen, x, y, width, height);

The alternative is to pass through a Rectangle object in place of the co-ordinates and dimensions. The syntax for creating a Rectangle object in C# is as follows:

Rectangle rectangleObj = new Rectangle (x, y, width, height);

Once a Rectangle object has been instantiated the syntax to call DrawRectangle() is as follows:

graphicsobj.DrawEllipse(pen, x, y, rectangleobj);

The following example creates a Rectangle which is then used as an argument to DrawEllipse():

When compiled and executed the above code creates the following graphics output on the form:

Drawing Text with C#

Text is drawn onto a Graphics Object using the DrawText() method. The syntax for this method is as follows:

graphicsobj.DrawString(string, font, brush, x, y);

The string argument specifies the text to be drawn. Font defines the font to be used to display the text and requires the creation of a Font object. The brush object is similar to the Pen object used to draw shapes with the exception that it specifies a fill pattern. Finally, the x and y values specify the top left hand corner of the text.

In order to create a Font object a font size, font family and font style may be specified. For example to create a Helvetica, 40 point Italic font:

A brush object is created by specifying by calling the appropriate constructor for the brush type and specifying a color:

Having created the necessary objects we can incorporate these into our example C# application to draw some text:

The above code, when compiled and run, will output the following text onto the form: