Methods for displaying graphic information in delphi. List of components for displaying graphic information. List of components for displaying graphic information

Description of the presentation by individual slides:

1 slide

Slide Description:

2 slide

Slide Description:

The Delphi visual programming environment, like Windows, supports a graphic user interface (GDI - Graphic Delphi Interface). In Delphi, there are two ways to display graphic information: displaying pre-prepared images; drawing from the program.

3 slide

Slide Description:

The first way is based on using the Image and Shape components. You can use a ready-made picture (pictogram) or create them yourself using the Image Editor. The second way is to render images programmatically using a Canvas object.

4 slide

Slide Description:

Delphi has a special object at its disposal, which is designed as a Canvas property. It is available only while the application is running, so it can only be controlled from within the program by writing the required code in Object Pascal. If an object has a Canvas property, you can draw on its surface. The most suitable candidates for this role are the form itself and the special PaintBox component.

5 slide

Slide Description:

Canvas object Properties: Pen (Pen) - property for drawing lines and borders of geometric shapes. The pen follows the commands of the graphic cursor and, in turn, has its own nested properties: Color - defines the line color (black by default); Mode - drawing style (has many values \u200b\u200bthat are not shown here); Style - line style, which can take on the following values: psSolid - solid (by default); psDosh - dashed; psDot - dotted; рsDoshDot - dotted dash (and other properties); Widh - line width (default 1 pixel);

6 slide

Slide Description:

Brush (Brush) - a property for filling shapes with the following attached properties: Color - the color of the brush (by default - white); Style - brush ornament, which can take on the following values: bsClear - solid color; bsHorizontal - horizontal lines; bsVertical - vertical lines; bsFDiagonal - left diagonal lines; bsBDiagonal - right diagonal lines; bsCross - cell; bsDiagCross - slanting cell;

7 slide

Slide Description:

Font - a property for displaying text, with the following attached properties: Color - the color of characters; Height - font height in pixels; Name - the name of the font; Size - font size; Style — font style, which can take the following values: fsBold - bold; fsItalic - italic; fsUnderline - underlined; fsStrikeOut - strikethrough;

8 slide

Slide Description:

PenPos (Pen position) - a property for storing the current drawing position (determines the position of the pen in the drawing area at a given time); Pixels is an array property for writing and reading the coordinates of individual points of the drawing area ("canvas").

9 slide

Slide Description:

Methods of the Canvas object MoveTo (x, y: integer) - moves the pen from the current position to the point with the specified coordinates x, y without drawing a line; LineTo (xy: integer) -moves the pen from the current position to the point with the specified coordinates x, y with a line drawing; Arc (x1, y1, x2, y2, x3, y3, x4, y4: integer) - draws an arc of an ellipse inscribed in a rectangle with coordinates (x1, y1) and (x2, y2). The arc is defined by the radii of the ellipse passing through the points (x3, y3) and (x4, y4);

10 slide

Slide Description:

Chord (x1, y1, x2, y2, x3, y3, x4, y4: integer) - draws a chord of an ellipse as described for the Arc method; Ellipse (x1, y1, x2, y2: integer) - draws an ellipse inscribed in a rectangle with the upper left corner at the point (x1, y1) and the lower right corner at the point (x2, y2); FillRect (Rect (x1, y1, x2, y2: integer)) - fills the rectangle with the color specified in the current brush (Brush). Uses the Rect function, which represents a rectangle at the given coordinates;

11 slide

Slide Description:

FloodFill (x, y: integer; Color: TColor; FillStyle: TFillStyle) - filling with the current color specified in the Brush property: with FillStyle \u003d fsBorder - a closed area from a point with coordinates x, y to the border defined by the Color color; with FillStyle \u003d fsSurface - that part of the surface that has the Color color; Pie (x1, y1, x2, y2, x3, y3, x4, y4: integer) - draws a sector of an ellipse inscribed in a rectangle with coordinates (x1, y1) and (x2, y2). The sector is defined by two ellipse radii passing through the points (x3, y3) and (x4, y4);

12 slide

Slide Description:

Polyline (Points: array of TPoint) - draws a polyline connecting the points of the Points array in series; Polygon (Points: array of TPoint) - draws polygons by sequentially connecting the points of the Points array. It differs from the Polyline method in that it automatically connects the end of the polyline to its beginning; Rectangle (x1, y1, x2, y2: integer) - draws a rectangle with the upper left corner at the point (x1, y1) and the lower right corner at the point (x2, y2);

13 slide

Slide Description:

Retresh - the method is called when the image needs to be redrawn; RoundRect (x1, y1, x2, y2, x3, y3: integer) - draws a rectangle with rounded corners. The corners are drawn as quarters of an ellipse with a width of x3 and a height of y3; TextOut (x, y: integer, Text: String) - displays the text specified in the Text parameter. The text fits into a rectangle whose upper-left corner has x, y coordinates.

Slide 2

"Displaying graphic information in Delphi" Topic plan: Ways of displaying graphic information in Delphi. Displaying pictures. Display of geometric shapes. Construction of graphs and diagrams.

Slide 3

1. Methods for displaying graphic information. In Delphi, there are several ways to display graphic information: Output of pre-prepared images (components Image, Shape); Construction of graphs and charts (Chart component, etc.); Generating images programmatically (Canvas object).

Slide 4

Displaying pictures. We have covered the display of pictures using the Image component in one of the previous topics. Here we will look at an example of implementing the simplest animation by periodically changing the displayed image in the Image components. Go for an example.

Slide 5

Display of geometric shapes. The display of the simplest geometric shapes on the form is provided by the Shape component.

Slide 6

Display of geometric shapes. Basic properties of the Shape component:

Slide 7

Display of geometric shapes. Several Shape components can be used to create simple drawings. By programmatically changing the position (.Left, .Top), the size (.Width, .Height) and color (Brush.Color) of the Shape components in the drawing, you can implement elements of the simplest animation. Consider an example.

Slide 8

Construction of graphs and diagrams. Diagrams are intended for a more visual representation of arrays of numerical data, their visual display and analysis. Example. There are several components for building charts in Delphi, one of them is the Chart component (section TeeChart Std).

Slide 9

Construction of graphs and diagrams. View of the Chart component after its installation on the form:

Slide 10

Construction of graphs and diagrams. In addition to the "Object Inspector", access to the properties of the Chart component can be obtained by opening a special dialog window (right button on the \\ Edit Chart… component) Add a data series Change the chart type

Slide 11

Construction of graphs and diagrams. Choosing a chart type:

Slide 12

Construction of graphs and diagrams. Setting properties for the axes (Axis):

Slide 13

Construction of graphs and diagrams. Data for display is usually transferred to the Chart programmatically, for example: Series1.Clear; (clear series) for i: \u003d 1 to N do Series1.addxy (i, A [i], ‘’, clGreen); X-axis value Y-axis value Label along the X-axis Data color on the chart Consider an example of plotting a function y \u003d Sin (x)

Slide 14

Next: Laboratory work No. 13.1. "Display of pictures and geometric shapes, their animation." Task: 1) Develop an application for the implementation of the simplest animation by periodically changing the displayed image in the Image components. (The number of pictures is at least three, you can choose the pictures yourself).

Slide 15

Task: 2) Design and draw a drawing from Shape components. By programmatically changing the position, size or color of the Shape components in the drawing, implement the elements of the simplest animation.

Slide 16

Next: Laboratory work No. 12.2. "Construction of graphs and diagrams." Task: Modify the application from laboratory work No. 9 (Displaying data in a table). Add the ability to display some data from a table on a bar or pie chart. 2) Build a graph of a given function.

View all slides

Theme :
The purpose of the laboratory work Delphi.

Students must learn to:

Create charts

Theoretical part

Pictogram	Name	Page	Appointment
	Image	Additional
	Shape	Additional
	DrawGrid (table of figures)	Additional
	Chart (charts and graphs)	Additional
	PaintBox (drawing window)	System

Shape Brush

Image:

Chart:

Method Clear

Method Add

Method AddXY

PaintBox:

The task 1

Assignment 2

Assignment 3

with PaintBox1, canvas do

Brush.Color: \u003d clRed;

Pen.Color: \u003d clGreen;

Pen.Style:\u003d psDash;

Pen.Color: \u003d clRed;

Explanation:

The task 4

Var i: integer;

Series1.Clear;

for i: \u003d 0 to 22 do

Series1.AddXY (i * 0.29,10 *sin (i * 0.29), ”,clGreen) ;,where i * 0.29 (AXValue)this is an argument and 10* sin (i * 0.29) (AYValue)

y \u003d 3.2 * (14 * x)
y \u003d sin (x)
y \u003d cos (x)
y \u003d x 2 + cos (x)
y \u003d x 2 -4.5 * 4

The task 5

with ComboBox1 do begin

Items: \u003d Screen.Fonts;

Save and run the project.

Assignment to work.
Paste the code you wrote

Conclusion on the work done. Theme : Using graphics capabilities.

The purpose of the laboratory work - Get to know the graphics capabilities Delphi.

Students must learn to:

Create any graphic pieces J
Use graphics capabilities
Apply graphics capabilities
Create charts

Theoretical part

Delphi allows you to develop applications that can display graphics: diagrams, drawings, illustrations. To display graphical information, the Delphi library provides components, the list of which is given in the following table:

Pictogram	Name	Page	Appointment
	Image	Additional	Used to display graphics: thumbnails, bitmaps and metafiles
	Shape	Additional	Used to build geometric primitives
	DrawGrid (table of figures)	Additional	Used to create a table in the application that can contain graphics
	Chart (charts and graphs)	Additional	Used to create charts and graphs
	PaintBox (drawing window)	System	Used to create some area on the form in which to draw

In addition, you can display and enter graphic information on the surface of any window component that has a Canvas property. Drawings created during the execution of the application can be either motionless or animated.

Shape : only conditionally can be attributed to the means of displaying graphic information, since it simply represents various geometric shapes, appropriately shaded. The main property of this component is Shape, which can take values, Brush (brush) - this property is an object of type TBrush that has a number of subproperties, in particular: color (Brush.Color) and style (Brush.Style) of the shape's fill. The third specific property of the Shape component is Pen, which defines the line style.

Image: basic properties: Picture - responsible for loading the image, Stretch - responsible for the size of the image in the Image component, AutoSize - responsible for the size of the component into which the image was loaded, taking into account the size of the image.

Chart: To set the displayed values, use the methods of the Series. Let's consider three of them.

Method Clear clears the series from previously entered data.

Method Add: - Add (Const AValue: Double; Const ALabel: String; AColor: TColor)

allows you to add a new point to the diagram. The AValue parameter corresponds to the added value of the function, and the value of the function argument is filled in automatically, so you do not need to set it, the ALabel parameter is the name that will be displayed on the diagram and in the legend, AColor is the color. The ALabel parameter is optional, you can set it empty: ”.

Method AddXY - AddXY (Const AXValue, AYValue: Double; Const ALabel: String; AColor: TColor)

allows you to add a new point to the graph of the function. The parameters AXValue and AYValue correspond to the argument and function. The ALabel and AColor parameters are the same as in the Add method.

PaintBox: be on the System page. It is a simple canvas window where you can draw arbitrary images. Graphics tools are contained in the Font, Brush and Pen properties. The canvas (canvas) is contained in the Canvas property of the component. The painting itself is programmed in the onPaint event handler.

The task 1

Create a program that introduces you to the Image component. It is necessary to place the components: Label, Image, BitBtn, Button. Sign as shown and upload any image. Adjust the components so that in Image1 the image fits into the frames, and in Image2 the image matches its size. Make tooltips, when you hover over each image, the Hint property is responsible for the hints, to display you need to enter the text and enable the hints in the ShowHint property.

Assignment 2

Increase the size of the shape, and add components: Shape, Label. Subscribe.
Apply different styles to each Shape component according to the image:

Assignment 3

For example, let's place the PaintBox component on a form. OnPaint handler:

with PaintBox1, canvas do

Brush.Color: \u003d clRed;

Pie (12,100,140,280,12,100,140,280);

Pen.Color: \u003d clGreen;

Pen.Style:\u003d psDash;

Rectangle (120,60, Width, Height);

Pen.Color: \u003d clRed;

Polyline ();

TextOut (75,20, 'Your text can be here!');

Explanation:The first line sets the fill color: Brush.Color: \u003d clRed; The second draws part of the ellipse: Pie (12,100,140,280,12,100,140,280); The following lines set the parameters of the pen (what will be the border of the shapes), width, color and line style: Pen.Width: \u003d 4; Pen.Color: \u003d clGreen; Pen.Style:\u003d psDash; But in this case, we will see one solid line, since if the thickness is more than one pixel, the line style will be psSolid (solid). The following line is responsible for drawing the square: Rectangle (120,60, Width, Height); The following command draws a red asterisk: Polyline (); The last line is responsible for the text output: TextOut (75,20, "Your text can be here!");

The task 4

1. Make a program that plots a given graph of the function y \u003d 10 * sin (x)

Enlarge the form and place the TChart component from the Additional tab on it, and place the Button, Label component. Stretch the new TChart to a convenient size for development.
We go into the graph editor by double clicking on the component. Editing and customizing the appearance of Series. To do this, click Add and select the Line chart type and click OK. To change the title, press Title and enter the formula y \u003d 10 * sin (x).
Write the code for drawing the chart in the OnClick event of the Button component:

Var i: integer;

Series1.Clear;

for i: \u003d 0 to 22 do

Series1.AddXY (i * 0.29,10 * sin (i * 0.29), ”, clGreen);

Explanation: Method Series1.Clear; clears the series from previously entered data so that when updating there are no old values. To draw a graph, you need values, in our case 22 values, at which the graph is drawn by the function Series1.AddXY (i * 0.29,10 *sin (i * 0.29), ”,clGreen) ;,where i * 0.29 (AXValue)this is an argument and 10* sin (i * 0.29) (AYValue)function calculation value, ”(ALabel) the name that will be displayed on the diagram and in the legend can be left blank, and clGreen (AColor) is the line color.

Do the following task yourself: draw a graph of functions
y \u003d 3.2 * (14 * x)
y \u003d sin (x)
y \u003d cos (x)
y \u003d x 2 + cos (x)
y \u003d x 2 -4.5 * 4

The task 5

Create an application that allows you to view system font characters.
Enlarge the shape, place DrawGrid1, ComboBox1, Label. Set the following properties for the DrawGrid1 component: RowCount \u003d 7, ColCount \u003d 32, FixedCols \u003d 0, FixedRows \u003d 0, DafaultColWidth \u003d 20, DefaultRowHeight \u003d 20.
To redraw the contents of each cell, create an OnDrawCell event handler for the DrawGrid1 component. Let's use the Canvas property of the DrawGrid1 component to display font characters. We directly need the TextRect method of the Canvas property. This method is used to display text information in a specific cell. The event handler will look like this:

DrawGrid1.Canvas.textrect (rect, Rect.Left, Rect.Top, char ((ARow + 1) * 32 + acol));

Save the project. Make sure that the table cells display the characters in the default system font.
To select a font, we will use the ComboBox1 component. In order for this component to contain all screen fonts, it is necessary to add them to the list when creating the form. The names of all screen fonts can be found using the Screen global variable of type TScreen. This variable is automatically added to all Delphi applications. The Screen variable contains information about the current state of the application screen: the names of forms and data modules used by the application; data about the active form and the components used by this form; the size and resolution of the screen used; information about the cursors and fonts available to the application. Information about the fonts available to the application is contained in the Font property of the Screen variable.
Create an onCreate event handler for the form and add statements to it:

with ComboBox1 do begin

Items: \u003d Screen.Fonts;

ItemIndex: \u003d Items.IndexOf (Font.Name);

Save and run the project. The DrawGrid1 component contains the characters of the font set in ComboBox1.
In order to bind the value of the font name for DrawGrid1 and ComboBox1, let's create another event handler:

DrawGrid1.Font.Name:\u003dComboBox1.Text;

Save and run the project.

Number, topic, purpose of the laboratory work.
Assignment to work.
Description of input, intermediate and resulting data with indication of their type.
Program in the programming language.
Program execution result (Entered data and received data)
Paste the code you wrote
Conclusion on the work done.

Working with graphics in Delphi it is not only lines and pictures, but also printing of text documents. Therefore in Delphi graphics you need to take a little time. Work with the graphics in Delphi assumes access to the canvas - the Canvas property of the components. Canvas Delphi it is a canvas that allows the programmer to have access to every point (pixel), and, like the artist, to display what is required. Of course draw pixel by pixel for work with graphics in Delphi it is not necessary, the Delphi system provides for powerful graphics toolsthat make the task of the programmer easier.

When working with graphics in Delphi, the programmer has a canvas (canvas, canvas - property Canvas Delphi components), pencil (property Pen), a brush (Brush property) of the component or object on which you want to paint. By the pencil Pen and brushes Brush you can change the color (Color property) and style (Style property). Access to fonts is provided by the canvas property Font... These tools allow you to display both text and rather complex graphics of mathematical and engineering content, as well as drawings. Besides, work with graphics allows you to use such resources in Delphi Windows as graphic and video files.

Of course, not all components in Delphi have these properties. In the tab Additional a specialized component is located TImagespecially designed for drawing, but also a property Canvas have, for example, such components as ListBox, ComboBox, StringGrid, as well as the Form itself, which hosts our components! In addition, Delphi refers to the Canvas property of an object such as a printer to print documents.

The main property of an object like Canvas Delphi is Pixels type TColor, that is, it is a two-dimensional array of points (pixels) specified by their color. Drawing on the canvas occurs at the moment of assigning a specified color to any point of the canvas. Each pixel can be assigned any color available for Windows. For example, executing the operator

Image1.Canvas.Pixels: \u003d clRed;

Will lead to drawing a red point with coordinates. You can find out the color of a pixel by the reverse assignment:

Color: \u003d Image1.Canvas.Pixels;

A type TColor defined as a long integer (LongInt). Its four bytes contain information about the proportions of blue (B), green (G), and red (R) colors. Hexadecimal it looks like this: $ 00BBGGRR... The proportion of each color can vary from 0 to 255. Therefore, to display the maximum red point, it must be assigned color $ 000000FF.
Delphi defines a set of text constants for standard colors. You can see it by opening the Color property in the Object Inspector, for example, of the same Shape.

The following table contains some of the canvas properties and methods:

Procedure TextOut (X, Y: Integer; const Text: WideString);
Produces string output Text starting at (X, Y) - the upper left pixel of the text.

TextWidth property ( var Text: String): Integer;
Contains the length of the string Text in pixels.

TextHeight property ( var Text: String): Integer;
Contains the line height Text in pixels.

MoveTo procedure (X, Y: Integer);
Moves the position to the pixel with the address (X, Y).

Procedure LineTo (X, Y: Integer);
Draws a straight line from the point of the current position to the pixel with the address (X, Y). Address (X, Y) becomes the point of the current position.

The FillRect procedure ( const Rect: TRect);
Fills the rectangle Rect on the canvas using the current brush. It can also be used to erase part of an image on the canvas.

Let's write, using only these canvas methods, an application for drawing on the component's canvas Image the text that is entered into the component Memo:

The first thing we will do is initialize the variables when the program starts. It is necessary to determine the size of the drawing area (create for this a global variable Rect of the TRect type) and make the background color Image white:

procedure TForm1.FormCreate (Sender: TObject);
begin
Rect.Left: \u003d 0;
Rect.Top:\u003d0;
Rect.Right: \u003d Image1.Width;
Rect.Bottom: \u003d Image1.Height;
Image1.Canvas.Brush.Color: \u003d clWhite;
end;

Then we draw a border around the sides of the Image:

procedure TForm1.page;
begin
with Image1.Canvas do
begin
MoveTo (0, 0);
LineTo (Image1.Width-1, 0);
LineTo (Image1.Width-1, Image1.Height-1);
LineTo (0, Image1.Height-1);
LineTo (0, 0);
end;
end;

Let's try what happened. Everything works, but the frame is not displayed yet. Therefore, we add the procedure page in the procedure FormCreate... Now it's beautiful. Next, we will write a simple procedure for erasing, clearing Image. It will need to be called before any image update, otherwise the previous and subsequent images will overlap.

procedure TForm1.clearing;
begin
Image1.Canvas.FillRect (Rect); //Rectangle Rect fills in white, the image is erased.
end;

Now it's the turn of the text output procedure itself. Let's start drawing the text from point (3, 3) - the upper left corner of the sheet, with a slight indent of 3 pixels. Each subsequent line will be offset by the line height:

procedure TForm1.prn;
var i: Integer;
begin
with Image1.Canvas do
for i: \u003d 1 to Memo1.Lines.Count do
TextOut (3, 3+ (i-1) * TextHeight ("A"), Memo1.Lines);
end;

Everything is now ready to display the text. We will do this by the OnChange event:

procedure TForm1.Memo1Change (Sender: TObject);
begin
clearing;
prn;
page;
end;

And finally, the procedure for changing the font size:

procedure TForm1.Edit1Change (Sender: TObject);
begin
Memo1.Font.Size: \u003d UpDown1.Position;
Image1.Canvas.Font.Size: \u003d UpDown1.Position;
Memo1Change (Sender);
end;

You can modify this program to print text. To work with the printer, you need to connect the module Printers:

unit Unit1;

Interface

uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
Dialogs, StdCtrls, Printers ;

When working with the printer as a canvas, the method is called to start printing BeginDoc, then the document is output, printing ends by calling the method EndDoc:

Printer.BeginDoc;
with Printer.Canvas do
begin
... Printing a Document ...
end;
Printer.EndDoc;

The width and height of the printer web are available through the properties Printer.PageWidth and Printer.PageHeight... You can finish printing on one page and start printing on another using the method Printer.NewPage.

LABORATORY WORK

THEME: « Graphics inDelphi - construction of the simplest
geometric shapes "

Summary of theory

Delphi provides the developer with three ways to display graphics:

building graphs while the program is running

use of pre-created graphic images

creating images using graphic components

To draw graphs, special classes have been created that provide tools and methods for drawing: tools are described in three classes - Tfont, Tpen, Tbrush; drawing area and methods are provided by the Tcanvas class.

ClassTfont - sets the characteristics of the font used to display the text on the canvas. The properties of the class are described in the section "General properties available for most components".

ClassTpen- sets the characteristics of the pen (pencil) with which lines are drawn.

Propertiesclass Tpen:

Color: Tcolor - line color (default is black)

Width: integer - line thickness in pixels;

Style \u003d (psSolid, psDash, psDot, psdashDot, psClear) - defines the line style (solid, dash, dash, dash-dot, invisible)

ClassTbrush- sets the characteristics of the brush used to paint over the image surfaces.

Properties class Tbrush:

Color: Tcolor - brush color (default is white)

Style - brush ornament, can take on values:

BsSolid - solid coloring

BsClear - lack of shading

BsVertical - vertical lines

BsBdiagonal - right diagonal lines

BsDiagCross - slanting cell

BsHorisontal - horizontal lines

BsFdiagonal - left diagonal lines

BsCross - cell

ClassTcanvas - defines the surface on which the created image is placed, and the tools with which the image is created: font, pencil, brush.

By default, the entire client area of \u200b\u200bthe form (without the title, main menu and form scrolling lines) is used as the work area (canvas, "canvas"), but you can draw out smaller work areas inside the form using components PaintBox or Image... The origin of the canvas coordinate is the upper left corner of the work area, the width of the work area is determined by the property ClientWidth, height - property ClientHeight.

Properties class Tcanvas:

Canvas: Tcanvas - defines the drawing area

Brush: Tbrush - brush for filling closed shapes

Font: Tfont - font for displaying text on canvas

Pen: Tpen - pencil (pen) for drawing

PenPos: Tpoint - the current position of the invisible cursor on the canvas

Comment : type Tpoint - defined as follows:

Type Tpoint \u003d record

Pixels:Tcolor - sets the colors of canvas pixels, X, Y - pixel coordinates. The Pixels property is useful for plotting graphs using points of the selected color.

The main methods of the TCanvas class

procedure MoveTo(x, y: integer); - moves the pen without drawing a line to a point with coordinates (x, y).

Procedure LineTo(x, y: integer); - draws a line from the current point to the point with coordinates (x, y).

Example : Draw a blue diagonal line on the shape from the upper left corner of the shape to the lower right corner.

Pen.color: \u003d clblue;

MoveTo (0,0); LineTo (ClientWidth, ClientHeight);

procedure Rectangle(x1, y1, x2, y2: integer); - draws a rectangle: x1, y1 - coordinates of the upper left corner; х2, у2- coordinates of the lower right corner.

Example : Draw a yellow-filled 60-pixel square in the middle of the shape.

varXc, Yc: integer; //

Xc: \u003d ClientWidth div 2;

Xy: \u003d ClientHeight div 2;

Canvas.Brush.color: \u003d clyellow;

Canvas.rectangle (xc-30, Yc-30, xc + 30, Yc + 30);

procedure Ellipse(x1, y1, x2, y2: integer); - draws an ellipse inscribed in a rectangle with the specified coordinates.

Example : Draw an ellipse inscribed in the PaintBox component.

PaintBox1.Canvas.Pen.Width: \u003d 4; // line width \u003d 4 pixels

PaintBox1.Canvas.Ellipse (0,0, PaintBox1. ClientWidth, PaintBox1. ClientHeight);

procedure Polygon(); - draws a closed polygon given by an array of coordinates.

Example : draw a filled rhombus connecting the midpoints of the sides of the shape

VarXc, Yc: integer; // coordinates of the center of the client area of \u200b\u200bthe form

Xc: \u003d ClientWidth div 2;

Xy: \u003d ClientHeight div 2;

Canvas.Brush.Color: \u003d Rgb (275,140,70); // orange colour shading

Canvas.Polygon ();

end;

Procedure Arc(x1, y1, x2, y2, x3, y3, x4, y4: integer); - displays the arc of an ellipse bounded by a rectangle (x1, y1, x2, y2). The arc is displayed from a point with coordinates (x3, y3) to a point with coordinates (x4, y4) vs clockwise.

Example : draw an elliptical arc connecting the middle of the top side of the component
PaintBox with the middle of its right side.

Procedure Tform1.Button1Click (Sender: Tobject);

Var X3, y3, x4, y4: Integer;

With PaintBox1 do

Canvas.Pen.Color: \u003d clWhite;

Canvas.Pen.Width: \u003d 3;

Canvas.rectangle (0, 0, PaintBox1.ClientWidth, PaintBox1.ClientHeight);

X3: \u003d ClientWidth div 2;

X4: \u003d ClientWidth;

Y4: \u003d ClientHeight div 2;

Canvas.Pen.Color: \u003d clMaroon;

Canvas.ARC (0, 0, PaintBox1.ClientWidth, PaintBox1.ClientHeight, x3, y3, x4, y4);

End;

procedure Chord (x1, y1, x2, y2, x3, y3, x4, y4: integer); - draws a chord - a straight line connecting 2 points of the ellipse: a point with coordinates (x3, y3) with a point (x4, y4).

Example : substitute in the example given for the ARC method, the Chord method and get this result.

procedure Pie(x1, y1, x2, y2, x3, y3, x4, y4: integer); - draws a segment of an ellipse connecting the center of the ellipse with coordinates (x3, y3) and (x4, y4).

Example : Introduce the PIE method in the example provided for the ARC method and get this result.

procedure TextOut(x, y: integer; Text: string); - outputs the string passed in the Text parameter into a rectangle, the upper left corner of which is specified by the x, y coordinates. Font characteristics are set with the Font tool.

Example : write the name of the plotted graph at the bottom of the form.

Canvas.Font.Height: \u003d 20 ; // character height 20 pixels

Canvas.Font.Color: \u003d clblue;

Canvas.TextOut (10, ClientHeight-24, 'graph of SIN (X) function');

Graphics components

Delphi offers a number of out-of-the-box components to enhance the user experience. These components are posted on the page Additional and System palette of components.

ComponentImage(classTimage) - designed to display graphic images stored in external files with extensions:

Ico (icon, pictogram);

Bmp (bitmap, bitmap);

Wmf, .emf (metafile);

Jpg, .jpeg (JPEG compressed image).

The main properties :

Autosize: boolean - if true, the component adjusts its size to the size of the loaded image; default false.

Stretch: boolean - if true, the loaded value occupies the entire area of \u200b\u200bthe component; the default is false.

Canvas: Tcanvas - is used for drawing inside a component at runtime.

Picture: Tpicture-defines the picture placed in the component.

The main methods class Tpicture:

Procedure LoadFromFile(Filename: string); - loads into the component an image from a file named Filename.

Procedure SaveToFile(Filename: string); - saves the image from the component to a file named Filename.

ComponentPaintBox - defines a rectangular area to draw. The main property is Canvas, all methods of the Tcanvas class are available, it has no independent properties.

Example : draw a yellow ellipse inscribed in the PaintBox1 component.

Procedure Tform1Button1Click (sender: Tobject);

With PaintBox1.Canvas do

Brush.Color: \u003d clyellow;

Ellipse (0,0, PaintBox1.ClientWidth, PaintBox1.ClientHeight);

end;

ComponentBitBtn – raster button

The BitBtn button, unlike the standard one, can, in addition to its name (Caption), contain an image set by the property Glyph... There is a set of standard buttons BitBtn, with predefined properties (with a specific picture, label and purpose) - the type of the standard button is selected through the property Kind... Kind \u003d (bkCustom, bkAbort, bkCancel, bkClose ...)

Task number 1

Create an application that contains two Image components and 4 buttons on the main form ("Load Image", "Build Geometric Shape", "Change Color", "Exit"), and allows you to:

a) load a user-selected graphic image into the Image1 component so that the image occupies the entire area of \u200b\u200bthe Image component.

b) under the Image1 component display the inscription “This is a picture from a file.

(for any measurement of the dimensions and position of the componentImage1 inscription must
directly under the component).

c) draw a geometric figure inside the Image2 component: a filled ellipse segment connecting the middle of the Image component with the middle of the lower and right sides of the Image component.

(for any resizing and positioning of the componentImage2, the figure must be built correctly, i.e. according to the assignment regarding the componentImage2)

d) change the line color of the figure drawn in Image2 at the user's request using the ColorDialog component.

Task number 2

Create an application that allows you to randomly arrange several labels in the Image component (for example, the word "Hurray!"). For implementation, use the Randomize random number generator and the Random function.

The dimensions of the Image component, the word displayed in the Image and the number of words must be entered by the user.

Task number 3

Create an application that allows you to select the name of a geometric shape from the ListBox and draw the selected shape in the Image component. The color of the shape is selected from the RadioGroup component.

Task number 4

Divide the PaintBox1 component into 4 equal parts, paint each part in a different color, for example: blue, yellow, green, red.

Next to each corner of PaintBox1, write the coordinates of this corner (relative to the origin of the form on which the PaintBox1 component is located).

Task number 5

FROM

select the type of the drawn shape from the Radiogroup1 component, the fill color from the Radiogroup2 component and draw the selected shape in the Image component.

Task number 6

Create an application that allows the user to size the PaintBox1 component (in pixels).

Divide the PaintBox1 component into 2 equal parts, inside each part draw an ellipse painted in the color selected by the user in the ColorDialog.

Task number 7

FROM create an application that allows you to:

select the name of a geometric shape from the ListBox list and draw the selected shape in the Image component. The shape should be filled with the user-selected color in the ColorDialog component if the RadioGroup component is set to Yes.

Task number 8

Create an application that allows the user to size the PaintBox1 component (in pixels).

Divide the PaintBox1 component into 4 equal parts, inside each part draw a different geometric shape (ellipse, diamond, triangle and rectangle). The color of each shape is selected by the user in the ColorGrid.

Task number 9

select a geometric name from the ListBox
shapes (ellipse, rhombus, rectangle) and draw
the selected shape in the Image component. Location
figures in the Image component (I quarter, II quarter,

III or IV quarter) and the color of the figure is selected
from the RadioGroup components.

Task number 10

Create an application that allows the user to size the PaintBox1 component (in pixels).

Provide that the side size cannot be text, cannot be a negative number, and cannot exceed the smaller size of the form.

Divide the PaintBox1 component into 4 equal parts, inside each part draw a geometric shape selected by the user in the Combobox (ellipse, rhombus, triangle and rectangle). The color of the shape, selected by the user in the ColorBox.

Task number 11

Create an application that allows you to:

Select the position of the drawing from the Radiogroup component

in the Image component of a right triangle, set
shape fill color or outline color depending on
enable checkbox buttons. Select color through
the ColorGrid component.

Task number 12

Create an application that allows the user to size the PaintBox1 component (in pixels).

Provide that the side size cannot be text, cannot be a negative number, and cannot exceed the smaller size of the form.

Divide the PaintBox1 component into 2 equal parts, inside one of the parts draw a geometric shape selected by the user in the Combobox (ellipse, rhombus, triangle and rectangle). The color of the shape, selected by the user in the ColorBox.

For example, you can change the color of a form as follows:

form1.Color: \u003d ColorBox1.Colors;

Task number 13

Create an application that allows you to:

a) draw a square in the middle of the shape (the size of the side of the square is entered by the user). Provide that the side size cannot be text, cannot be a negative number, and cannot exceed the smaller size of the form.

b) divide the square with one diagonal or two, depending on the inclusion of the Checkbox buttons and paint each resulting triangle in a different color. The choice of color is made by the user.

Task number 14

Create an application that allows the user to size the PaintBox1 component (in pixels).

Provide that the side size cannot be text, cannot be a negative number, and cannot exceed the smaller size of the form.

Divide the PaintBox1 component into 2 equal parts, draw a diamond inside one part, and draw any triangle inside the other part. The color of the shape, selected by the user in the ColorBox.

For example, you can change the color of a form as follows:

form1.Color: \u003d ColorBox1.Colors;

Task number 15

Create an application that allows you to:

a) set the horizontal and vertical dimensions of the Image component to be the same and equal to the number entered by the user from the keyboard;

(provide that the side size cannot be text, cannot be a negative number, and cannot exceed the smaller size of the form)

b) divide the Image component into 4 equal squares with two blue lines;

c) inside each resulting square, draw a circle inscribed in it (let the user choose the color of the circles through the color selection dialog box).

Task number 16

Create an application that allows the user to size the PaintBox1 component (in pixels).

Provide that the side size cannot be text, cannot be a negative number, and cannot exceed the smaller size of the form.

Divide the PaintBox1 component into 9 equal parts and paint each resulting rectangle in the form of a checkerboard. The fill color is chosen by the user in the ColorBox.

For example, you can change the color of a form as follows:

form1.Color: \u003d ColorBox1.Colors;

Task number 17

Place two Image components and four buttons on the form: Line Color, Fill Color, Ok and Exit; and the Edit component.

When you click OK, a square with side X is drawn in Image1, and a right-angled triangle with equal legs, each of which has length X, is drawn in Image2.

The vertex of the triangle coincides with the origin of Image2. One of the vertices of the square coincides with the origin of Image1.

The OK button becomes available only when the line color and the fill color for drawing the shape are selected.

X - selects randomly, using the Random function and the value of the X value should be displayed in the Edit component.

Task number 18

Create an application that allows the user to size the PaintBox1 component (in pixels).

Divide the PaintBox1 component into 4 equal parts, inside the part selected by the user, a filled circle should be built, the size of which is set by the user. The user selects the fill color in the ColorBox.

For example, you can change the color of a form as follows:

form1.Color: \u003d ColorBox1.Colors;