Presentation on programming in the Delphi environment on the topic: "Displaying graphical information in Delphi." Using Delphi Graphics Features Brief Theory

To display graphic information, the Delphi library provides components, the list of which is given in table. 6.

Table 6

Components for displaying graphic information

In addition, you can display and enter graphical information on the surface of any window component that has the property Canvas- canvas.

Image Tables - DrawGrid and StringGrid Components

Component DrawGrid used to create a table in the application that can contain graphic images. This component is similar to the component StringGrid since the latter is derived from DrawGrid. Therefore in DrawGrid all properties, methods, events of the component are present StringGrid except those related to the text, i.e. except properties Cells, Cols, Rows, Objects. From this point of view, the component StringGrid has significantly greater capabilities than DrawGrid since it can store both images and texts in cells. And if you want to enter text in some cells DrawGrid then you will need to use methods for displaying text on an outline for this, which is not very convenient.

Components DrawGrid and StringGrid have an outline Canvas, on which you can post images.

There is a method Cell-Rect, which returns the canvas area allocated for a given cell. This method is defined as

function CellRect(ACol, ARow: Longint): TRect;

Where ACol and ARow- column and row indices starting from 0, at the intersection of which the cell is located. The area returned by this function is the canvas area in which the desired image can be drawn. For example, the operator

DrawGridl.Canvas.CopyRect(DrawGridl.CellRect(1,1),

BitMap.Canvas,Rect(0,0,BitMap.Height,BitMap.Width));

copies method CopyRect to cell (1,1) of the table DrawGridl image from component BitMap. This cell is second from the left and second from the top in the table, since indices start at 0. Please note that if the cell is smaller than the size of the copied image, then only the upper left part of the image will appear in the cell.

Image on the component canvas DrawGrid and StringGrid, as on the canvas of any component, it is subject to erasure when the application window is overlapped by other windows or, for example, when the application is minimized.

In a convenient way adding images to cells DrawGrid is to use an event handler OnDrawCell. These events occur for each table cell at the time it is redrawn. The handler header looks like:

procedure TForml.DrawGridlDrawCell(Sender: TObject;

ACol, ARow: Integer; Rect: TRect; State: TGridDrawState)

Parameter State indicates the state of the cell. It is a set that can contain the following elements: gdSelected- selected cell, gdFocused- the cell that is in focus, gdFixed- a cell in a fixed area of ​​the table. Parameter State can be used to display cells differently in different states.

Shape Component

Shape Component can only conditionally be classified as a means of displaying graphic information, since it simply represents various geometric shapes, appropriately shaded. The main property of this component is Shape(form), which can take the following values:

StRectangle – rectangle;

StSquare – square;

StRoundRect - rectangle with rounded corners;

StRouhdSquare - square with rounded corners;

StEllipse – ellipse;

StCircle - circle.

Another essential property of the component is Brush(brush). This property is an object of type TBrush, having a number of sub-properties, in particular color (Brush.Color) and style (Brush.Style) filling the figure. You can see the fill for some Style values ​​in Fig. 3.2. The third specific property of the component Shape- Pen(feather) that defines the line style.

Chart Component

Now let's look at the component Chart. This component allows you to build various charts and graphs that look very impressive. Component Chart has many properties, methods, events, so that if we considered them all, we would have to devote an entire chapter to this. Therefore, we will limit ourselves to considering only the main characteristics Chart. You can find the rest in Delphi's built-in help, or just try them out by experimenting with the diagrams.

Component Chart is a container of objects Series- heirs of the class TChartSeries. Each such object represents a series of data characterized by a certain display style: a particular graph or diagram. Each component Chart may include several episodes. If you want to display a graph, then each series will correspond to one curve on the graph. If you want to display charts, for some types of charts you can overlay several different series on top of each other, for others (like pie charts) it will probably look ugly. However, even in this case, you can set for one component Chart several series of identical data with different types diagrams. Then, by making one of them active at each time, you can provide the user with a choice of the type of chart that displays the data they are interested in.

Place one or two components Chart on the form and look at the properties that open in the Object Inspector. Here are some explanations of some of them.

AllowPanning - determines the user's ability to scroll the observed part of the graph during execution by pressing the right mouse button. Possible values: pmNone - scrolling is prohibited, pmHori/ontal, pm Vertical or pmBoth - scrolling is allowed, respectively, only in the horizontal direction, only in the vertical direction, or in both directions.

AhowZoom - allows the user to change the image zoom at runtime by cutting out fragments of a chart or graph with the mouse cursor. If the frame of a fragment is drawn to the right and down, then this fragment is stretched to cover the entire field of the graph. And if the frame is drawn up and to the left, then the original scale is restored.

Title - defines the title of the diagram.

Foot - defines the caption under the diagram. None by default. The signature text is determined by the Text subproperty.

Frame - defines the frame around the diagram.

Next to many of the listed properties in the Object Inspector there are buttons with ellipses that allow you to call one or another page of the Chart Editor - a multi-page window that allows you to set all the properties of the charts. The Diagram Editor can also be called by double-clicking on the component Chart or by right-clicking on it and selecting the Edit Chart command from the pop-up menu.

Double click on the top component Chart. You will be taken to the Chart Editor window on the Chart page, which has several tabs. First of all, you will be interested in the Series tab on it. Click on the Add button - add a series. You will be taken to a window where you can select the type of chart or graph. In this case, select Pie - a pie chart. Using the Titles tab, you can set the title of the chart, the Legend tab allows you to set parameters for displaying the chart legend (list of symbols) or remove it from the screen altogether, the Panel tab determines the appearance of the panel on which the chart is displayed, the 3D tab gives you the opportunity to change the appearance of your chart: tilt, shift, thickness, etc.

When you are working in the Chart Editor and have selected a chart type, the components Chart Your form displays its appearance with the conditional data entered into it. Therefore, you can immediately see the result of applying various options to your application, which is very convenient.

The Series page, which also has a number of tabs, gives you the opportunity to select additional characteristics series display. In particular, for a pie chart, on the Format tab, it is useful to enable the Circled Pie option, which will ensure that the chart is displayed as a circle at any size of the Chart component. On the Marks tab, the buttons of the Style group determine what will be written on the labels related to individual segments of the chart: Value - value, Percent - percentages, Label - data names, etc.

You can, if you wish, add another identical series to this Chart component by clicking the Clone button on the Series tab of the Chart page, and then for this new series Click the Change button and select a different chart type, for example Bar.

Exit the Chart Editor, select the bottom Chart component in your application and repeat setting its properties using the Chart Editor. In this case, you will need to specify two series if you want to display two curves on the graph, and select the Line chart type. Since we are talking about graphs, you can use the Axis and Walls tabs to specify the coordinate characteristics of the axes and three-dimensional edges of the graph.

That's it for design appearance application ends. All that remains is to write the code that specifies the data you want to display. For the test application, let's set just some constant data in the pie chart, and some functions in the graphs.

To set the displayed values, you must use Series methods. Let's focus only on three main methods.

Method Clear clears a series of previously entered data.

Method Add:

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

allows you to add a new point to the diagram. Parameter AValue corresponds to the added value, parameter ALabel- a label that will be displayed on the diagram and in the legend, AColor- color. Parameter ALabel- optional, it can be set empty: ‘ ’. Method AddXY:

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

allows you to add a new point to the function graph. Options AXValue And AYValue correspond to argument and function. Options ALabel and AColor the same as in the method Add.

Thus, the procedure for loading data in our example could look like:

const Al=155; A2=251; A3=203; A4=404; var i:word; begin

With Series do begin

Add(Al,"Workshop l",clYellow);

Add(A2,"Workshop 2",clBlue);

Add(A3,"Workshop 3",clRed);

Add(A4,"Workshop 4",clPurple); end;

Series2.Clear; SeriesS.Clear; for i:=0 to 100 do begin

Series2.AddXY(0.02*Pi*i,sin(0.02*Pi*i)

SeriesS.AddXY(0.02*Pi*i,cos(0.02*Pi*i) end;

ClRed); ,clBlue);

Operators Clear are needed if you are going to update data while the application is running.

This concludes our introduction to the component Chart. True, we have considered only a small part of its capabilities.

Visual Component Library (VCL) Delphi provides us with the following visual components for displaying graphic information: Image (image), PaintBox (window for drawing), DrawGrid (table of pictures), Chart (charts and graphs), Animate ( output video clips), as well as Form. These components have a Canvas property (discussed above) that gives access to each pixel. Of course, you don’t have to draw pixel by pixel to work with graphics in Delphi; the Delphi system provides powerful tools working with graphics.

Let's take a closer look at the above components:

Image Component

Is an object of the TImage class. Used to display images read from graphic files. By default, displays images presented in *.bmp format on the surface of the form. To output images in jpg format, you need to include the JPEG module in the uses directive. Located in the Additional tab of the Component Palette.

After placing the Image component on the form, it takes the form of a selected rectangular area.

Figure 9 - Image component on the form

To open a dialog for selecting the desired image, you must do the following using the Object Inspector. To do this, find the Picture property and click on the three dots to the left of it. The Picture Editor window opens and in it select Load; in the window that opens, select the image file.

This can also be done programmatically by calling the LoadFromFile method of the Picture property:

Image1.Picture.LoadFromFile("name_pic.jpeg");

where name_pic.jpeg is the file name.

Table 8 - Basic properties of the Image component

Example 1: Write a program to view images using the Image component. The program must have the following capabilities:

• · view images in the folder;
• · view the image in full size or in the format most suitable for the window size;
• · manage image files, as well as print, save, delete and edit images;
• · if necessary, open the image in an editing program;

Figure 10 - Program window before it starts

Creating a project:

• 1. Create a folder for the program files and launch the Delphi integrated development environment.
• 2. Add components to the form:

First, we will place the Image component on the form, the main component with which we will have to work. In addition to this, we will need the following components:

• · ScrollBox It is necessary when in full-size mode the image will go beyond the Image. We assign the value alClient to its Aling property so that its dimensions change proportionally with the size of the window. And place the Image component on it;
• · We will also add dialog components SavePictureDialog and OpenPictureDialog, designed for saving and opening images. We need the first one to copy the image to the selected directory, the second one - to call the opening dialog graphic file. They are located on the Dialogs page of the Component Palette. From this page we also need the PrintDialog component, which we need to call the dialog for selecting a printer for printing.
• · Add MainMenu to add a main menu to the program and XPManifest for a more colorful design
• · We also need to store the names of the images located in the working directory somewhere. The ListBox component is convenient for these purposes; it can be hidden when processing the Create event of Form1.
• · To place navigation buttons and comfortable work with them we will add the Veil panel, on which we will place these buttons (Previous image, Next image, True size, Fit to size, Delete, Copy to, Print, Edit). SpeedButton is selected as a component for them.
• · Add a timer to catch keystrokes “Left” (previous image), “Right” (next image) and the “Del” key (deleting image).
• · And one more component - ProgressBar, which displays the process of loading large *.Jpg files.
• 3. Write code for processing the button click event (Previous image, Next image, True size, Fit to size, Delete, Copy to, Print, Edit). Write code for processing the event of clicking on MainMenu menu items (Exit, Open, Close, Create).
• 4. Set initial settings creating a form. Double click on free space forms and write code procedures procedures TForm1.FormCreate(Sender:TObject), see module code in Appendix 1.
• 5. Write procedures of the following type:

procedure FindFileInFolder(path, ext: string);

This procedure scans the path folder for files using the ext mask.

The complete listing of the program module code is located in Appendix 1 (Program Listing 3).

• 1. List the capabilities of the Image component.
• 2. What class is the Image component an object of?
• 3. 3. What file type does the Image component support by default?
• 4. 4. List the main properties of the Image component.
• 5. 5. What property stores the image of the Image component?

"Displaying graphical information in Delphi"
Topic plan:
1. Graphic output methods
information in Delphi.
2. Display pictures.
3. Geometric display
figures.

“Displaying graphical information in Delphi” Topic outline: 1.C S pppp ooooo ssss ooooo bbbb yyyy in in in yyyy vvvv ooooo dddd aaaa yy g rrrrr aaaa ffff iii hhhh eee ssss kkkk ooooo yyyy nnnn ffff ooooo rrrrr mmmm ahhh tskst iiiiii iiiiii in iv in D D D D eeee llll pppp hhhh iiii O O tttt ooo bbbb rrrrr aaaa zhzhzh eee nnnn iiii eee k k k aaaa rrrrr tttt iiii nnnnn ooooo kkkk O O tttt ooooo bbbb rrrrr aaa zhzhzh eee nnnnn iiiiii eee g g y g eee ooooo mmmm eee ttt rrrr iiii hhchh eee ssss kkkk iiii xxxxx ffff iiii yyyy uuuu rrrrr P Pooooo ssss ttt rrrrr ooooo eee nnnn iiii eee yy g g rrrrr aaaa ffff iiii kkkk ooooo vvvv i i i and d d d d iiiiii aaaa yyyy rrrrr aaaa mmmm mmmm....

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

2.Display 2.Display pictures. The display of pictures using the IMAGE component we examined in LLC DDDD DDDD LLC Yiyy and and and the ZZZZ P P P PRRRDDDDDDDDDDDDDDD IIII XXXX T T T T T T T T T T T T TOTEMMM .... Here we will consider an example of the simplest animation periodically changing the displayed image in the Image components. PPPP eee rrrrr eee yyyytttoeee nnnn aaaaaaaaaaaaaaaaaaaaaaaaaa

3.Display 3.Display of geometric shapes. AND From several Shape components you can create simple drawings. P By programmatically changing the position (.Left,.Top), size (.Width,.Height) and color (Brush.Color) of the Shape components in a drawing, you can implement elements of the simplest animation. R R R R aaaa ssssssss mmmm ooooh tttt rrrrr eee tttt yee p p p p rrrrr iii mmmm eee rrrrr....

4.Construction 4.Construction of graphs and diagrams. Diagrams are designed for a more visual representation of numerical data arrays, their visual display and analysis. PPPP rrrrr iiii mmmm eee rrrrr.... To create charts in Delphi there are several components, one of them is the Chart component (section TeeChart Std).

Graphs and diagrams. The data to be displayed is usually passed to the Chart programmatically, example: Series1.Clear; (clear series) for i:=1 to N do Series1.addxy(i, A[i], clGreen); X-axis value Y-axis value X-axis label Data color on the PP chart aaaa sssssssssss mmmm ooooo tttt rrrrr eee tttt yee p p p p prrrr iiii mmmm eee rrrrr p p p poooo ssss ttt rrrrr ooooo eee nnnn iiiiii yayyy yyyy rrrrr aaaa ffff iii kkkk aaaa f f f f uuuu nnnn kkkk tsstst iiiiii y y y y = = = = S S S S iiii nnnn ((((xxxx))))

Next: Laboratory work ““““ OOOO tttt ooooo bbbb rrrrr aaaa zhzhzh eee nnnn iiii eee k k k k aaaa rrrrr tttt iiii nnnn ooooo kkkk i i i i yyyy eee ooooo mmmm eee tttt rrrrr iiii hchchh eee ssss kkkk iiii xxxx ffff iiii yyyy uuuu rrrrr, and and and xxxx a a a a a nnnn iiii mmmm aaaa tsstst iiii yayayaya """"...Task: 1) Develop an application for performing simple animation by periodically changing the displayed image in the Image components. (The number of pictures is at least three, choose the pictures yourself).

Next: Laboratory work ““““ PPPP oooo ssss tttt rrrrr ooooo eee nnnn iiii eee yy g rrrrr aaaa ffff iiii kkkk ooooo vvvv i i i i d d d iiii aaaa yyyy rrrrr aaaa mmmm mmmm """". ..Task: 1)M modify the application from laboratory work 9 (Displaying data in a table). Add the ability to display some data from a table in a histogram or pie chart. 2) Construct a graph of the given function.

Description of the presentation by individual slides:

1 slide

Slide description:

2 slide

Slide description:

Visual environment Delphi programming, like Windows, supports GUI user (GDI – Graphic Delphi Interface). In Delphi, there are two ways to display graphical information: displaying pre-prepared images; drawing from the program.

3 slide

Slide description:

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

4 slide

Slide description:

Delphi has at its disposal a special object, which is styled as the Canvas property. It is available only while the application is running, so it can only be controlled from within the program by writing the necessary code in Object Pascal. If an object has the 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 – 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 – determines the color of the line (black by default); Mode – drawing style (has many meanings that are not given here); Style – line style, which can take the following values: рsSolid – solid (default); рsDosh – dashed; psDot – dotted; рsDoshDot – dotted line (and other properties); Widh – line thickness (default 1 pixel);

6 slide

Slide description:

Brush – a property for filling shapes with the following nested properties: Color – brush color (white by default); Style – brush pattern, which can take the following values: bsClear – solid coloring; bsHorizontal – horizontal lines; bsVertical – vertical lines; bsFDiagonal – left diagonal lines; bsBDiagonal – right diagonal lines; bsCross – cell; bsDiagCross – oblique cell;

7 slide

Slide description:

Font – a property for displaying text that has the following nested properties: Color – character color; Height – font height in pixels; Name – font name; Size – font size; Style – font style, which can take the following values: fsBold – bold; fsItalic – italic; fsUnderline – underlined; fsStrikeOut – crossed out;

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 – an array property for writing and reading the coordinates of individual points of the drawing area (“canvas”).

Slide 9

Slide description:

Methods of the Canvas object MoveTo(x,y: integer) – moves the pen from the current position to a point with the specified x, y coordinates without drawing a line; LineTo(x.y: integer) - moves the pen from the current position to a point with the given coordinates x, y, drawing a line; Arc(x1, y1, x2, y2, x3, y3, x4, y4: integer) – draws the arc of an ellipse inscribed in a rectangle with coordinates (x1, y1) and (x2, y2). The arc is determined 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 according to the description given 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. 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=fsBorder – a closed area from the point with coordinates x, y to the border, defined by color Color; with FillStyle=fsSurface – that portion 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, sequentially connecting the points of the Points array; Polygon (Points: array of TPoint) – draws polygons by sequentially connecting points in 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);

Slide 13

Slide description:

Retresh – the method is called when it is necessary to redraw the image; 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) – outputs the text specified in the Text parameter. The text fits into a rectangle whose upper left corner has x, y coordinates.