Component for displaying graphical information in delphi. Presentation on the topic "Displaying graphical information in Delphi." Brief information from the theory
Working with graphics in Delphi it's not just lines and drawings, but also printing text documents. Therefore in Delphi at work with graphics you need to spend a little time. Work with graphics in Delphi involves accessing the canvas - the Canvas property of components. Canvas Delphi this is a canvas that allows the programmer to have access to each of its points (pixels), and, like an artist, display what is required. Of course, draw pixel by pixel for working with graphics in Delphi is not necessary, the Delphi system provides powerful graphics tools, making the programmer's task easier.
When working with graphics in Delphi, the programmer has at his disposal an outline (canvas, canvas - property Canvas Delphi components), pencil (property Pen), brush (Brush property) of the component or object on which you are supposed to paint. At 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 quite complex graphs of mathematical and engineering content, as well as drawings. Besides, working with graphics allows you to use such resources in Delphi Windows like graphics and video files.
Of course, not all components in Delphi have these properties. On the tab Additional a specialized component is located TImage, specifically designed for drawing, but also the property Canvas have, for example, components such as ListBox, ComboBox, StringGrid, as well as the Form itself, which places our components! Additionally, to print documents, Delphi accesses the Canvas property of an object such as the printer.
The main property of such an object as 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 given color to any point on the canvas. Each pixel can be assigned any available for Windows color. For example, executing the statement
Image1.Canvas.Pixels:=clRed;
Will result in drawing a red dot with coordinates . You can find out the color of a pixel by inverse assignment:
Color:=Image1.Canvas.Pixels;
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. In hexadecimal system it looks like this: $00BBGGRR. The proportion of each color can vary from 0 to 255. Therefore, in order to display the maximum red point, it needs to be assigned color $000000FF.
For standard colors in Delphi a set of text constants is defined. You can see it by opening the Color property, for example, of the same Form in the Object Inspector.
The following table contains some canvas properties and methods:
| Procedure TextOut(X, Y: Integer; const Text: WideString); Produces a string output Text starting from (X, Y) - the top left pixel of the text. |
| Property TextWidth( var Text: String): Integer; Contains the length of the string Text in pixels. |
| Property TextHeight( var Text: String): Integer; Contains the line height Text in pixels. |
| Procedure MoveTo(X, Y: Integer); Moves the position to the pixel with 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). The address (X, Y) becomes the point of the current position. |
| Procedure FillRect( const Rect: TRect); Fills a rectangle Rect on the canvas using the current brush. Can be used, among other things, to erase part of an image on the canvas. |
Let's write, using only these canvas methods, an application for an image on the component canvas Image 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 (we will create a global variable Rect of type TRect for this) and set the background color Image white:
procedure TForm1.FormCreate(Sender: TObject);
begin
Rect.Left:=0;
Rect.Top:=0;
Rect.Right:=Image1.Width;
Rect.Bottom:=Image1.Height;
Image1.Canvas.Brush.Color:=clWhite;
end;
Then draw a frame on 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, let's add a procedure page in the procedure FormCreate. Now it's beautiful. Next we will write simple procedure 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 is filled with white and the image is erased.
end;
Now it’s the turn of the text output procedure itself. Let's start drawing text from point (3, 3) - the upper left corner of the sheet, with a slight indentation of 3 pixels. Each subsequent line will be offset by line height:
procedure TForm1.prn;
var i: Integer;
begin
with Image1.Canvas do
for i:=1 to Memo1.Lines.Count do
TextOut(3, 3+(i-1)*TextHeight("A"), Memo1.Lines);
end;
Now everything is ready to output text. We will do this using 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:=UpDown1.Position;
Image1.Canvas.Font.Size:=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 is completed by calling the method EndDoc:
Printer.BeginDoc;
with Printer.Canvas do
begin
...Print 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.
List of display components graphic information
To display graphic information, the Delphi library provides components, the list of which is given in Table 4.1. Table 4.1 Graphic information display components Pictogram Component Page Description Image Used to display graphics: icons, bitmaps and metafiles. PaintBox (window for drawing) Used to create some area on the form in which you can draw. DrawGrid (table of drawings) Used to display non-text data in rows and columns. Chart (charts and graphs) The component belongs to the TChart family of components, which are used to create charts and graphs. Canvas Canvas is not a component, so strictly speaking it should not be considered within the scope of this book. But since many components, in particular forms, have an outline and the outline provides the ability to display various graphic information, it is still advisable to give some initial information about the outline. The canvas is the area of a component on which you can draw or display finished images. It contains properties and methods that greatly simplify Delphi graphics. All complex interactions with the system are hidden for the user, so a person who is not at all experienced in computer graphics can draw in Delphi. Each point of the outline has coordinates X And Y. The canvas coordinate system, as elsewhere in Delphi, has its origin in the upper left corner of the canvas. Coordinate X increases when moving from left to right, and the coordinate Y- when moving from top to bottom. Coordinates are measured in pixels. A pixel is the smallest element of a design's surface that can be manipulated. The most important property of a pixel is its color. The canvas has the property Pixels. This property is a two-dimensional array that is responsible for the colors of the canvas. For example, Canvas. Pixels matches the color of the pixel 10th from the left and 20th from the top. You can treat an array of pixels like any property: change the color by giving the pixel a new value, or determine its color from a value stored in it. For example, Canvas. Pixels:=0 or Canvas. Pixels:=clBlack- this is to set the pixel to black. Property Pixels can be used for drawing on canvas. Let's try to draw a pixel-by-pixel graph of a sinusoid on the outline of the form. To do this, in the form event handler OnPaint(drawing) you can insert the following code: TForm1. FormPaint(Sender: TObject); var,Y:real; // function coordinates,PY: longint; // pixel coordinates begin:=clWhite; for PX:=0 to ClientWidth do (X is the graph argument, :=PX*4*Pi/ClientWidth;:=Sin(X); (PY - pixel coordinate, : =trunc (ClientHeight - (Y+1) *ClientHeight/2); (Sets the color of the selected pixel (About brightness). Pixels: = 0; end;
Run this test application and you will see the result shown in Figure 4.1 a. The sine wave graph turned out, although not very good, because is divided into individual points - pixels. Canvas - class object TCanvas has many methods that allow you to draw graphs, lines, shapes using the property Pen- feather. This property is an object, which in turn has a number of properties. One of them is a property you already know Color- the color with which the drawing is applied. Second property - Width(line width). The width is specified in pixels. The default width is 1. Property Style determines the type of line. This property can take the following values: The canvas has the property PenPos type TPoint(cm Let's try to draw the sine graph from the previous example with a pen. In this case, the form event handler OnPaint may look like: procedure TForm1. FormPaint(Sender: TObject); var,Y:real; // function coordinates,PY: longint; // pixel coordinates begin: =clWhite;. MoveTo(0,ClientHeight div 2); for PX: =0 to ClientWidth do (X is the graph argument, corresponding to the pixel with coordinate РХ):=PX*4*Pi/ClientWidth;:=Sin(X); (PY - pixel coordinate, corresponding to the Y coordinate):=trunc(ClientHeight - (Y+1) *ClientHeight/2); (A line is drawn on the graph). LineTo(PX,PY); You can see the result of the application in this version in Fig. 4.1 b. As you can see, the quality of the graphics has improved significantly. The pen can draw not only straight lines, but also shapes. For a complete list of canvas methods that use the pen, see Delphi's built-in help. For now, as an example, we will give only one of them - Ellipse, which draws an ellipse or circle. It is declared as procedure Ellipse(X1, Y1, X2, Y2: Integer); where are the parameters X1, X2, Y1, Y2 determine the coordinates of a rectangle describing an ellipse or circle. For example, the operator Ellipse(10, 40, 20, 50); will draw a circle with a diameter of 10 and center coordinates (15, 45). In the general case, figures are drawn not empty, but filled in using the canvas property Brush- brush. Property Brush is an object that in turn has a number of properties. Property Color defines the fill color. Property Style defines the filling pattern (shading). Default value Style equals bsSolid, which means solid coloring Color. At the pen Pen There is one more property that we have not yet considered. This property is Mode(mode). Default value Mode = pmCopy. This means that the lines are drawn with the color specified in the property Color. But other modes are also possible, in which not only color is taken into account Color, but also the color of the corresponding background pixels. The most interesting of these modes is the pmNotXor- addition with background using inverse exclusive OR. If this mode is set, then drawing the same figure again in the same place on the canvas removes the previously drawn image and restores the pixel colors that were before the first image of the figure. This feature of the mode pmNotXor can be used to create simple animations. It is enough to draw something, then erase what you drew, redraw it slightly changed - and the drawing will seem to come to life. Try making a simple animation yourself - a moving circle. Start a new application and go to implementation insert ad X,Y: integer; This will introduce global variables X And Y- current image coordinates. In the form event OnPaint insert statements Brush. Color:=clWhite;:=clWhite;. Pen. Mode:=pmNotXor; The first of these operators sets the brush color to white Brush. This means your circle will be painted white inside. The second operator sets the background color of the form surface to white. The third operator sets the pen mode pmNotXor, which will allow you to erase the old image before drawing a new one. Even the simplest animation needs synchronization. Otherwise, the speed of movement will be determined by the speed of the computer. Therefore, transfer the component to the form Timer- timer from the System page. This component is described in section 5.7 You can watch it there detailed description. For now, set its property Interval equal to, for example, 30 (this is the exposure time in milliseconds, but real time the shutter speed will be longer - see section 5.7) and set the property Enabled equal false(this means that the timer will not start automatically when the application is launched). In the event handler of this component OnTimer insert statements // Erase the previous image. Ellipse (X-5, Y, X+5, Y-1Q);(X); // Draw a new image. Ellipse (X-5, Y, X+5, Y-10); // Stop when reaching the end of the form if(X >= ClientWidth-20) then. Enabled: = false; The first of these operators draws a circle in the place where it was drawn earlier, i.e. erases the previous image. The last operator stops the image at the edge of the form. Now add a button to the form Button and place the operators in the click handler on it X: =10;: =100;. Ellipse (X-5, Y, X+5, Y-10);. Enabled: =true; The first two operators specify the initial coordinates of the circle. The third operator draws the circle at its starting position, and the fourth operator starts the timer. Broadcast the application, run it, click on the button. You will see an image of a circle moving across the shape from left to right. And then use your imagination and transform this not very interesting application into something more exciting. The canvas can display not only programmatically created images, but also images stored in graphic files. Only the canvas itself does not have a method for loading an image from a file. Therefore, the file must be loaded into some other graphic object that can receive information from graphic files. And then rewrite the image from this object to the canvas using the canvas method Draw. Its description: Draw(X, Y: Integer; Graphic: TGraphic); Here are the parameters X And Y determine the coordinates of the upper left corner of the image placement on the canvas, a Graphic- an object that stores information. Such an object can be, for example, an object of type TBitMap, designed to store bit matrices. Let's see how this all looks in practice. Open a new application, drag a component onto the form OpenPictureDialog from the Dialogs page (this is a component of the dialog for opening graphic files - see section 8.2 procedure TForm1. Button1Click(Sender: TObject); var: TBitMap; // User selection graphic file
if OpenPictureDialog1. Execute then // Create a BitMap object of type TBitMap: =TBitMap. Create; // Transfer the image to the form canvas. Draw(10, 10, BitMap); //Destroying the BitMap object. Free; end;
This code creates a temporary object of type TBitMap With name BitMap. Then the dialog for opening a graphic file is called OpenPictureDialog1 and, if the user has selected a file, then it is downloaded to BitMap method LoadFromFile. Then using the method Draw the loaded image is copied onto the canvas in the area with the coordinates of the upper left corner (10,10). After this the temporary object BitMap is destroyed. Launch your application and click on its button. You will see that you can upload any type of graphic file. bmp and it will be displayed on the outline of the form (see Fig. 4.2 a). You can find graphic files in the Images directory. In Delphi 5 and 4 it is usually located in a directory. \program files\Common Files\Borland Shared. In Delphi 3 it is located in a directory. \program files\Borland\Delphi 3, and in Delphi 1 - in the Delphi 16 directory. In the Images directory there is, in particular, a subdirectory \Images\Splash\16Color\, which stores the file loaded in the example in Fig. 4.2 You have created a good application for viewing graphic files. But now let's try to see its major drawback. Without closing your application, go to some other program, for example, return to Delphi. Then, without doing anything there, go back to your running application. If the program window you went into completely blocked the window of your application, then when you return to it you will see that the picture in the window has disappeared. If your application window was only partially overlapped, then when you return to your application, you may see a result similar to that shown in Fig. 4.2 b. You see that if the window of some other application temporarily overlaps the window of your application, then the image drawn on the form outline is spoiled. Let's see how we can eliminate this drawback. If a window has been occluded and the image has become corrupted, the operating system tells the application that something has changed in the environment and that the application should take appropriate action. As soon as a window update is required, an event is generated for it OnPaint. In the handler of this event (in our case, the form event), you need to redraw the image. Redrawing can be done different ways depending on the application. In our example, it would be possible to declare a variable BitMap(operator var BitMap: TBitMap) beyond the above procedure, i.e. make this variable global by placing it directly in the section implementation. Operator BitMap. Free could be moved to the form event handler OnDestroy, which occurs when the application is closed. Then during the entire execution of your application you will have a copy of the image in the component BitMap and you just need to enter into the event handler OnPaint form there is only one operator: Draw(10, 10, BitMap); Do this, and you will see that the image on the form does not deteriorate due to any overlap of windows. In addition to the considered method Draw the outline also has a copy method CopyRect: CopyRect(Dest: TRect; Canvas: TCanvas; Source: TRect); The method copies the specified parameter Source image area in the image source canvas Canvas to the specified parameter Dest area of this canvas. Type TRect, characterizing rectangular areas Source And Dest, already described in section 3.2 For example, the operator CopyRect(MyRect2, Bitmap. Canvas, MyRect1); copies to the form outline in the area MyRect2 image from area MyRect1 component canvas Bitmap. Copy method CopyRect is performed in the mode specified by the property CopyMode. By default this property has the value cmSrcCopy, which simply means replacing the image previously contained in the area Dest, to the copied image. Other possible values CopyMode allow you to combine images, but their consideration is beyond the scope of this book. We will limit ourselves to this basic information about displaying graphic information on the canvas. In section 3.2 A window component that has the property Canvas- canvas. Image and PaintBox components Components Image And PaintBox represent some limited surface with a canvas on which images can be written, as described in section 4.2 But in addition to these capabilities, the component Image There are properties that allow you to work with various types graphic files. Supports three types of files - bit matrices, icons and metafiles. All three file types store images; the difference lies only in the way they are stored inside files and in the means of accessing them. Bit matrix (file with extension . bmp) displays the color of each pixel in the image. In this case, the information is stored in such a way that any computer can display an image with a resolution and number of colors corresponding to its configuration. Pictograms (files with the extension . ico) are small bit matrices. They are widely used to designate application icons, in quick buttons, in menu items, in various lists. The method of storing images in icons is similar to storing information in bit matrices, but there are also differences. In particular, the icon cannot be scaled; it remains the size in which it was created. Metafiles do not store the sequence of bits that make up the image, but information about how the image was created. They store sequences of drawing commands, which can be repeated when recreating the image. This makes such files generally more compact than bit matrices. Component Image allows you to display information contained in graphic files of all specified types. This is achieved by its property Picture- type object TPicture.
Fig.4.3 Picture Editor Window To get acquainted with this property, open a new application and drag a component onto the form Image. Stretch it or set its property Align equal alClient so that it takes up the entire client area of the form. Click on the button with the ellipsis next to the property Picture in the Object Inspector window or simply double-click on Image. The Picture Editor window will open in front of you (Fig. 4.3), allowing you to load into the property Picture some graphic file (Load button), and also save the open file under a new name or in a new directory. Click Load to load the graphic file. You will see a window for opening a graphic file, shown in Fig. 4.4 As you move the cursor in the list of graphic files, the pictures they contain are displayed in the right window, and above them are numbers characterizing the size of the picture. You can select any type of graphic file you require. Let us remind you that you can find the graphic files supplied with Delphi in the Images directory. In Delphi 5 and 4 it is usually located in a directory. \program files\Common Files\Borland Shared. In Delphi 3 it is located in a directory. \program files\Borland\Delphi 3, and in Delphi 1 - in the Delphi 16 directory. Once the file has loaded, click OK in the Picture Editor window and in your component Image The picture you selected will be displayed. You can launch your application and admire it. However, you already see the picture without even running the application. When you loaded an image from a file into a component during the design process Image, it not only displays it, but also saves it in the application. This gives you the ability to deliver your application without a separate graphics file. However, as we will see later, in Image You can also load external graphic files while the application is running. Let's return to considering the component properties Image. If you set the property AutoSize V true, then the component size Image will automatically adjust to the size of the picture placed in it. If the property AutoSize installed in false, then the image may not fit into the component or, conversely, the area of the component may be much larger than the area of the image. Another property - Stretch allows you to adjust not the component to the size of the picture, but the picture to the size of the component. Install AutoSize V false, stretch or shrink the size of the component Image and install Stretch V true. You will see that the drawing will take up the entire area of the component, but since it is unlikely to realistically determine the dimensions Image exactly proportional to the size of the picture, the image will be distorted. Install Stretch V true may only make sense for some patterns, but not for pictures. Property Stretch does not affect icon images that cannot be resized. Property - Center, set to true, centers the image on the area Image, if the component size is larger than the picture size. Let's consider one more property - Transparent(transparency). If Transparent equals true, then the image in Image becomes transparent. This can be used to overlay images on top of each other. Place the second component on the form Image and load another image into it. Just try to take some sparsely filled, outline picture. You can, for example, take a picture from among those usually placed on buttons, for example, an arrow (file.\program files\common files\borland shared\images\buttons\arrow1l. bmp). Move yours Image so that they overlap each other, and in the top component set Transparent equal true. You will see that the top image no longer obscures the bottom one. One of the possible uses of this property is to overlay on a picture inscriptions made in the form of a bit matrix. These inscriptions can be made using the Image Editor program built into Delphi. Please note that the property Transparent only affects bit matrices. In this case, the color of the lower left pixel of the bit matrix is made transparent by default (i.e., replaced by the color of the image located below it). We covered loading an image from a file during the design process. But the property Picture It also makes it easy to organize exchange with graphic files of any type during application execution. To explain the technique of such an exchange, we must first consider in more detail the property Picture. This property is an object, which in turn has subproperties that point to the stored graphic object. If in Picture a bit matrix is stored and is indicated by the property Picture. Bitmap. If an icon is stored, it is pointed to by the property Picture. Icon. The stored metafile is indicated by the property Picture. Metafile. Finally, a graphical object of any type is indicated by the property Picture. Graphic. An object Picture and its properties Bitmap, Icon,
Metafile And Graphic have file read and write methods LoadFromFile And SaveToFile:
procedure LoadFromFile( const FileName: string); procedure SaveToFile( const FileName: string);
For properties Picture. Bitmap, Picture. Icon And Picture. Metafile The file format must correspond to the object class: bit matrix, icon, metafile. When reading a file into the property Picture. Graphic the file must be in metafile format. And for the object itself Picture Reading and writing methods are automatically adjusted to the file type. Let's explain this with an example. Let's build an application similar to the example of viewing graphic files discussed in section 4.2. For variety, you can control it using something other than a button Button, and the menu. Place a component on the form Image. Stretch it or set its property Align equal alClient so that it takes up the entire client area of the form. Drag the graphic file opening dialog component to the form OpenPictureDialog(see section 8.2 (OpenPictureDialog1.Execute) then. Picture. LoadFromFile(.FileName); This operator will call a dialog for opening a graphic file (see Fig. 4.4) and load it into the component Image1 image from a file selected by the user (see Fig. 4.5). Moreover, the file can be of any type: bit matrix, icon or metafile. Fig.4.5 Image in component Image bit matrix (a) and pictogram (6) In this application the method LoadFromFile applied to Image1. Picture. If only bit matrix files will be opened, then the file loading operator can be replaced with Picture. Bitmap LoadFromFile(.FileName); For pictograms, an operator could be used. Picture. Icon. LoadFromFile(.FileName); and for metafiles - the operator. Picture. Metafile. LoadFromFile(.FileName); or. Picture. Graphic. LoadFromFile(.FileName); But in all these cases, if the file format does not match the intended one, an error will occur. The method works similarly SaveToFile with the difference that applied to Picture or to Picture. Graphic it saves an image of any format in a file. For example, if you extend your application with a dialog SavePictureDialog(see section 8.2 SavePictureDialog1. Execute then. Picture. SaveToFile(SavePictureDialog1. FileName); then the user will be able to save an image of any format in a file with a new name. Only in this case, in order to avoid confusion in the future, the extension of the saved file must still correspond to the format of the saved image. The program will work absolutely identically for images of any format if you replace the save operator with Picture. Graphic. SaveToFile(.FileName); using property Picture. Graphic. And if you know the format of what is stored in the component Image images, then you can apply the method SaveToFile to properties Picture. Bitmap, Picture. Icon And Picture. Metafile. For all considered objects Picture, Picture. Bitmap,
Picture. Icon And Picture. Metafile methods for assigning object values are defined: Assign(Source: TPersistent); However, for BitMap, Icon And Metafile You can only assign values of homogeneous objects: respectively, bit matrices, icons, metafiles. An exception is thrown when trying to assign values to heterogeneous objects EConvertError. An object Picture- universal, it can be assigned the values of objects of any of the other three classes. And the meaning Picture can only be assigned to an object whose type matches the type of the object stored in it. Method Assign can also be used to exchange images with the Clipboard buffer. For example, the operator Assign(Image1.Picture); will save the image stored in the clipboard to the clipboard Image1. Similar operator graphics delphi image application Image1. Picture. Assign (Clipboard); will read in Image1 an image on the clipboard. Moreover, it can be any image and even text. You just need to remember when working with the clipboard to paste into the operator uses your module link to the module Clipbrd. Delphi does not automatically insert this link. Returning to the component properties Image, we can note one drawback inherent in our test application, shown in Fig. 4.5 When loading different images, the size of the application window may be either too small, and then you will see only part of the image, or too large, and then the image will be unattractively placed in the upper left corner of the form, leaving a lot of empty space. This drawback can be eliminated by using the properties Height(height) and Width(width) component Image. With property AutoSize installed in true dimensions Image are automatically set to the same size as the uploaded image. And these dimensions can be used to resize the form accordingly. For example, the earlier code for loading an image from a file can be replaced with the following: OpenPictureDialog1. Execute then begin. Picture. LoadFromFile(.FileName); ClientHeight: = Image1. Height+10;. Top:=Form1. ClientRect. Top + (Form1. ClientHeight - Image1. Height) div 2;. ClientWidth:=Image1. Width+10;. Left: = Form1. ClientRect. Left + (Form1. ClientWidth - Image1. Width) div 2; end;
This code sets the size of the form's client area to be slightly larger than the size of the component. Image1, which in turn adapt to the size of the picture thanks to the property AutoSize. Make these changes to your application, run it, and see the form automatically adapt to the size of the uploaded image. Shape Component Component Shape 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: Examples of these forms are shown in Fig. 4.7 Fig.4.7 Component Examples Shape Another essential property of the component is Brush(brush). This property is an object of type TBrush, which has a number of subproperties, in particular: color ( Brush. Color) and style ( Brush. Style) fill the shape. Filling at some values Style you can see in Fig. 4.7 The third of the specific properties of the component Shape - Pen(pen) that defines the line style. This property is like property Brush, have already been discussed in section 4.2 Chart Component Now let's look at the component Chart. This component allows you to build various charts and graphs that look very impressive (Fig. 4.8). 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 type TChartSeries- series of data characterized by different display styles. Each component may include several series. 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, in this case too you can set for one component Chart several series of the same data with different chart types. 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 (if you want to reproduce Fig. 4.8) components Chart on the form and look at the properties that open in the Object Inspector. Here are some explanations of some of them. Determines whether the user can scroll the observed portion of the graph during execution by clicking the right mouse button. Possible values: pmNone - scrolling is prohibited, pmHorizontal, pmVertical or pmBoth - scrolling is allowed, respectively, only in the horizontal direction, only in the vertical direction, or in both directions. Allows the user to change the image scale during execution, cutting out fragments of a chart or graph with the mouse cursor (Fig. 4.8 b below shows the moment of viewing a fragment of the graph, entirely presented in Fig. 4.8 a). Defines the title of the chart. Defines the label for the chart. None by default. The signature text is determined by the Text subproperty. Defines a border around the diagram. The legend of the diagram is a list of symbols. MarginLeft, MarginRight, MarginTop, MarginBottom Left, right, top and bottom margin values. BottomAxis, LeftAxis, RightAxis These properties determine the characteristics of the bottom, left and right axes, respectively. Setting these properties makes sense for graphs and some types of charts. LeftWall, BottomWall, BackWall These properties determine the characteristics of the left, bottom and back edges of the three-dimensional display area of the graph, respectively (see Fig. 4.8 a, bottom graph). List of data series displayed in the component. Enables or disables 3D chart display. Characteristics of three-dimensional display. Three-dimensional scale (for Fig. 4.8 this is the thickness of the diagram and the width of the graph strips). 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. If you want to try to reproduce the application shown in Figure 4.8, double click on the top component Chart. You will be taken to the Chart Editor window (Fig. 4.9) to 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 (Fig. 4.10), in which 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 (see Fig. 4.11). Fig.4.10 Selecting a chart type in the Chart Editor 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, at any size of the component, Chart display the chart in the form of a circle. 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. In the example in Figure 4.8, the Percent button is enabled, and on the General tab, a percentage template is set to ensure that only integer values are displayed. You can, if you want, add to this component Chart another identical series by clicking the Clone button on the Series tab of the Chart page, and then for this new series clicking the Change button and selecting a different chart type, for example, Bar. Of course two different types diagrams in one picture will look bad. But you can turn off the indicator for this new series on the Series tab, and then let the user choose one or another type of chart display (we will show how this is done below). Exit the Diagram Editor, select the bottom component in your application Chart and repeat setting properties for it using the Diagram 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 just set some constant data in the pie chart, and sine and cosine functions in the graphs. To set the displayed values, you must use series methods Series. Let's focus only on three main methods. Method Clear clears a series of previously entered data. Method Add: (Const AValue: Double; Const ALabel: String;: TColor) allows you to add a new point to the diagram. Parameter AValue corresponds to the added value, parameter ALabel- the name that will be displayed on the diagram and in the legend, AColor- color. Parameter ALabel- optional, it can be set empty: "". Method AddXY:(Const AXValue, AYValue: Double;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: 155;=251;=203;=404; var: word; begin Series1 do begin;(A1, "Workshop 1", clYellow);(A2, "Workshop 2", clBlue);(A3, "Workshop 3", clRed);(A4, "Workshop 4", clPurple); end;. Clear;. Clear; for i: =0 to 100 do begin. AddXY (0.02*Pi*i, sin (0.02*Pi*i), "", clRed);. AddXY (0.02*Pi*i, cos (0.02*Pi*i), "", clBlue); If you have, for example, given the data displayed in a chart, two series Series1 And Series4 different types - Pie And Bar, then you can introduce a procedure that changes the type of diagram according to the user's request. This procedure can be entered into an event OnClick some button, a menu command, or, for example, simply processing a click on a component Chart. To load data into Series4 and make this diagram invisible at the first moment, you can insert the operators at the end of the previously given procedure Assign (Series1); Active: =false; The first of these operators rewrites the data placed in Series1, in series Series4. And the second operator makes the series invisible Series4. Changing the diagram type is carried out by the procedure Active: = not Series1. Active;. Active: = not Series4. Active; In Fig. 4.8 b you can see the result of the user switching to another diagram view. LABORATORY WORK SUBJECT: «
Graphics inDelphi– construction of the simplest Brief information from the theory Delphi provides the developer with three ways to display graphics: plotting while the program is running use of pre-created graphics creating images using graphic components To build graphs, special classes have been created that provide tools and methods for drawing: the tools are described in three classes - Tfont, Tpen, Tbrush; The drawing area and methods are provided by the Tcanvas class. ClassTfont– specifies the characteristics of the font used to display text on the canvas. The properties of the class are described in the section “Basic properties available for most components.” ClassTpen– specifies the characteristics of the pen (pencil) with which lines are drawn. Properties class Tpen:
Color:Tcolor – line color (default – black) Width:integer – line thickness in pixels; Style
= (psSolid, psDash, psDot, psdashDot, psClear) – defines the line style (solid, dashed, dotted, dash-dotted, invisible) ClassTbrush– sets the characteristics of the brush that paints the surface of the image. Properties class Tbrush: Color:Tcolor – brush color (default – white) Style– brush pattern, can take on the following values: BsSolid – solid coloring BsClear – lack of shading BsVertical – vertical lines BsBdiagonal – right diagonal lines BsDiagCross – oblique cell BsHorizontal – horizontal lines BsFdiagonal – left diagonal lines BsCross – cage ClassTcanvas– determines the surface on which the created image is placed, and the tools with which the image is created: font, pencil, brush. As work area(canvas, “canvas”), by default the entire client area of the form is used (without the header, main menu and form scrolling lines), but you can allocate 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 painting closed shapes Font:Tfont – font for displaying text on the canvas Pen:Tpen – pencil (pen) for drawing PenPos:Tpoint – current position of the invisible cursor on the canvas Comment
: Tpoint type – defined as follows: Type Point = record Pixels: Tcolor - sets the colors of the canvas pixels, X, Y - pixel coordinates. The Pixels property is convenient to use for plotting graphs using points of the selected color. 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 diagonal blue line on the shape from the top left corner of the shape to the bottom right corner. Pen.color:= 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; x2, y2 are the coordinates of the lower right corner. Example
: Draw a yellow-shaded square with a side of 60 pixels in the middle of the shape. var Xc,Yc: integer; // Xc:=ClientWidth div 2; Xy:=ClientHeight div 2; Canvas.Brush.color:=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:=4; //line width = 4 pixels PaintBox1.Canvas.Ellipse(0,0, PaintBox1. ClientWidth, PaintBox1. ClientHeight); procedure Polygon(); - draws a closed polygon specified by an array of coordinates. Example
: draw a filled diamond connecting the midpoints of the sides of the shape Var Xc,Yc:integer; // coordinates of the center of the form's client area Xc:=ClientWidth div 2; Xy:=ClientHeight div 2; Canvas.Brush.Color:=Rgb(275,140,70); // orange
color
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) against clockwise. Example
: draw an ellipse arc connecting the middle of the top side of the component Procedure Tform1.Button1Click(Sender:Tobject); Var X3,y3,x4,y4: Integer; With PaintBox1 do Canvas.Pen.Color:= clWhite; Canvas.Pen.Width:= 3; Canvas.rectangle(0, 0, PaintBox1.ClientWidth, PaintBox1.ClientHeight); X3:= ClientWidth div 2; X4:= ClientWidth; Y4:= ClientHeight div 2; Canvas.Pen.Color:= 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 the Chord method in the example given for the ARC method and get the following result. procedure Pie(x1,y1,x2,y2,x3,y3,x4,y4:integer); - draws an ellipse segment connecting the center of the ellipse with coordinates (x3,y3) and (x4,y4). Example
: In the example given for the ARC method, imagine the PIE 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 x, y coordinates. Font characteristics are set by the Font tool. Example
: write the name of the plotted graph at the bottom of the form. Canvas.Font.Height:=20 ; //character height 20 pixels Canvas.Font.Color:=clblue; Canvas.TextOut(10, ClientHeight-24, ‘graph of function SIN(X)’); Graphic components
Delphi offers a number of ready-made components that allow you to improve user interface. These components are located on the page Additional And System component palettes. ComponentImage(ClassTimage)
– created for displaying graphic images stored in external files with extensions: Ico(icon, pictogram); bmp ( raster image, bitmap); Wmf, .emf (metafile); Jpg, .jpeg (JPEG compressed image). Basic properties
: Autosize:boolean – when true the component adjusts its dimensions to the dimensions of the loaded image; default is false. Stretch:boolean – if true, the loaded value occupies the entire area of the component; default is false. Canvas:Tcanvas – used for drawing inside the component during program execution. Picture:Tpicture - Defines the image placed in the component. Basic methods class Tpicture: Procedure LoadFromFile(Filename:string); - loads an image from a file named Filename into the component. Procedure SaveToFile(Filename:string); -saves the image from the component to a file named Filename. ComponentPaintBox -
defines a rectangular drawing area. 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:=clyellow; Ellipse(0,0,PaintBox1.ClientWidth, PaintBox1.ClientHeight); end;
ComponentBitBtn –
raster button The BitBtn button, unlike the standard one, can, in addition to the title (Caption), contain an image specified by the property Glyph. There is a set of standard BitBtn buttons, with predefined properties (with a specific picture, inscription and purpose) - the type of standard button is selected through the property Kind. Kind=(bkCustom, bkAbort,bkCancel, bkClose …) Task No. 1
Create an application that contains main form two Image components and 4 buttons ("Load image", "Build a geometric figure", "Change color", "Exit"), and allows you to: a) load the user-selected graphic image into the Image1 component so that the image occupies the entire area of the Image component. b) under the Image1 component display the inscription “This is a picture from a file. (for any measurement of the size and position of the componentImage1 inscription should c) draw a geometric figure inside the Image2 component: a filled ellipse segment connecting the middle of the Image component with the middles of the bottom and right sides of the Image component. (for any change in the size and position of the componentImage2 the figure must be constructed correctly, i.e. according to the specification regarding the componentImage2)
d) change the color of the line of a figure drawn in Image2 at the user’s request using the ColorDialog component. Task No. 2
Create an application that allows you to randomly place several labels (for example, the word "Hurray!") in the Image component. To implement this, 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 No. 3
Create an application that allows you to select the name of a geometric shape from a ListBox and draw the selected shape in the Image component. The color of the shape is selected from the RadioGroup component. Task No. 4
Divide the PaintBox1 component into 4 equal parts, paint each part a different color, for example: blue, yellow, green, red. Next to each corner of PaintBox1, write the coordinates of that corner (relative to the origin of the form on which the PaintBox1 component is located). Task No. 5
WITH select the type of shape to be drawn from the Radiogroup1 component, the fill color from the Radiogroup2 component, and draw the selected shape in the Image component. Task No. 6
Create an application that allows the user to set the dimensions of the PaintBox1 component (in pixels). Divide the PaintBox1 component into 2 equal parts, inside each part draw an ellipse, filled with the color selected by the user in the ColorDialog. Task No. 7
WITH select the name of a geometric shape from the ListBox and draw the selected shape in the Image component. The shape should be filled with the color selected by the user in the ColorDialog component if Yes is selected in the RadioGroup component. Task No. 8
Create an application that allows the user to set the dimensions of the PaintBox1 component (in pixels). Divide the PaintBox1 component into 4 equal parts, inside each part draw a different geometric shape (ellipse, rhombus, triangle and rectangle). The color of each shape is selected by the user in the ColorGrid. Task No. 9
III or IV quarter) and the color of the figure is selected Task No. 10
Create an application that allows the user to set the dimensions of the PaintBox1 component (in pixels). Provide that the side size cannot be text, cannot be a negative number, and cannot exceed smaller size forms. 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 figure is selected by the user in the ColorBox. Task No. 11
Create an application that allows you to: in the Image component of the right triangle, set Task No. 12
Create an application that allows the user to set the dimensions of the PaintBox1 component (in pixels). Provide that the side size cannot be text, cannot be a negative number, and cannot exceed the smaller form size. 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 figure is selected by the user in the ColorBox. For example, you can change the color of the form as follows: form1.Color:= ColorBox1.Colors; Task No. 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 form size. b) divide the square into one diagonal or two, depending on the inclusion of the Checkbox buttons, and paint each resulting triangle a different color. The choice of color is made by the user. Task No. 14
Create an application that allows the user to set the dimensions of the PaintBox1 component (in pixels). Provide that the side size cannot be text, cannot be a negative number, and cannot exceed the smaller form size. Divide the PaintBox1 component into 2 equal parts, inside one part draw a rhombus, and inside the other part draw any triangle. The color of the figure is selected by the user in the ColorBox. For example, you can change the color of the form as follows: form1.Color:= ColorBox1.Colors; Task No. 15
Create an application that allows you to: a) set the dimensions of the Image component horizontally and vertically 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 form size) b) divide the Image component into 4 equal squares with two blue lines; c) inside each resulting square, draw a circle inscribed in it (allow the user to choose the color of the circles through the color selection dialog box). Task No. 16
Create an application that allows the user to set the dimensions of the PaintBox1 component (in pixels). Provide that the side size cannot be text, cannot be a negative number, and cannot exceed the smaller form size. Divide the PaintBox1 component by 9 equal parts and fill in each resulting checkerboard rectangle. The fill color is selected by the user in the ColorBox. For example, you can change the color of the form as follows: form1.Color:= ColorBox1.Colors; Task No. 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 the OK button, a square with side X is drawn in Image1, and a right 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 you have selected a line color and a fill color to draw the shape. X – selects randomly using the Random function and the value of X should be displayed in the Edit component. Task No. 18
Create an application that allows the user to set the dimensions of the PaintBox1 component (in pixels). Divide the PaintBox1 component into 4 equal parts; inside the user-selected part, 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 the form as follows: form1.Color:= ColorBox1.Colors; “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 Imaging 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 (Display 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. Slide 2 “Displaying graphical information in Delphi” Topic outline: Methods for displaying graphical information in Delphi. Display 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 (Image, Shape components); Construction of graphs and diagrams (Chart component, etc.); Generating images programmatically (Canvas object). Slide 4 Display pictures. We discussed displaying images using the Image component in one of the previous topics. Here we will look at an example of implementing a simple animation by periodically changing the displayed image in the Image components. Go to example. Slide 5 Display of geometric shapes. The display of simple geometric shapes on a 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. You can create simple designs from several Shape components. By programmatically changing the position (.Left, .Top), 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 designed for a more visual representation of numerical data arrays, their visual display and analysis. Example. There are several components for creating 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 installing it 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 box (right button on the component \ Edit Chart...) Add data series Change chart type Slide 11 Construction of graphs and diagrams. Choosing a chart type: Slide 12 Construction of graphs and diagrams. Setting properties for coordinate axes (Axis): Slide 13 Construction of 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 Color of data on the chart Consider an example of plotting the function y = Sin(x) Slide 14 Next: Laboratory work No. 13.1. “Display of pictures and geometric shapes, their animation.” Task: 1) Develop an application to implement simple animation by periodically changing the displayed image in the Image components. (The number of pictures is at least three, choose the pictures yourself). Slide 15 Task: 2) Come up with and draw a picture using Shape components. By programmatically changing the position, size or color of Shape components in a drawing, you can implement elements of simple animation. Slide 16 Next: Laboratory work No. 12.2. “Building graphs and diagrams.” Assignment: Modify the application from laboratory work No. 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.
View all slides
In addition, you can display and enter graphic information on the surface of any Display graphics on a Canvas.
geometric shapes"
PaintBox with the middle of its right side.
located strictly under the component).
Create an application that allows you to:
shapes (ellipse, rhombus, rectangle) and draw
the selected shape in the Image component. Location
shapes in the Image component (I quarter, II quarter,
from RadioGroup components.
the color of the figure's shading or outline color, depending on
enabling Checkbox buttons. Select color via
ColorGrid component.
