Visual Component Library (VCL) Delphi for display graphic information provides us with the following visual components: Image (image), PaintBox (drawing window), DrawGrid (picture table), Chart (charts and graphs), Animate (output video clips), and Form. These components have a Canvas property (described 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 for working with graphics.
Let's take a closer look at the above components:
It is an object of the TImage class. Used to display images read from graphic files. By default, it displays on the surface of the form images presented in *.bmp format. To display images in jpg format, you need to include the JPEG module in the uses directive. It is 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 to select the desired image, 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 select Load in it, 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 name of the file.
Table 8 - Main properties of the Image component
|
Property |
Description |
|
|
Image displayed in the component field |
||
|
Component dimensions. If these dimensions are smaller than the illustration size, and the Strech, AutoSize, and Proportional properties are set to False, then part of the image is displayed |
||
|
Allows you to automatically scale pictures without distortion. To perform scaling, the value of the AutoSize property must be False |
||
|
Allows you to automatically scale (compress or stretch) the image according to the size of the Image component. If the size of the component is not proportional to the size of the image, then the image will be distorted. |
||
|
Allows you to automatically resize a component to match the size of the image |
||
|
Allows you to determine the position of the image in the field of the Image component horizontally, if the width of the image is less than the width of the component. |
||
|
Surface for displaying graphics |
||
|
Specifies the transparent background color of an image |
Example 1: Write an image viewer using the Image component. The program must have the following features:
Figure 10 - Program window before its launch
Project creation:
First, we will place the Image component on the form, the main component with which we will have to work. In addition to it, we need the following components:
procedure FindFileInFolder(path, ext: string);
This procedure scans the path folder for files with the mask ext.
A complete code listing of the program module is located in Appendix 1 (Program Listing 3).
LABORATORY WORK
SUBJECT: «
Graphics inDelphi- construction of the simplest
geometric shapes"
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
For plotting, special classes have been created that provide tools and methods for drawing: tools are described in three classes - Tfont, Tpen, Tbrush; the 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 "Basic Properties Available for Most Components" section.
Classtpen– sets the characteristics of the pen (pencil) with which lines are drawn.
Properties class tpen:
color:Tcolor - line color (black by default)
Width:integer – line thickness in pixels;
style = (psSolid, psDash, psDot, psdashDot, psClear) - defines the line style (solid, dashed, dotted, 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 the following values:
BsSolid - solid coloring
BsClear - no fill
BsVertical - vertical lines
BsBdiagonal - right diagonal lines
BsDiagCross - oblique cell
BsHorisontal- horizontal lines
BsFdiagonal - left diagonal lines
BsCross - cell
Classfabrics- 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 the form is used as the working area (canvas, "canvas") (without the title, main menu and scroll lines of the form), but you can allocate smaller working areas inside the form using components paint box or Image. The origin of the canvas 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 fabrics:
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 - the current position of the invisible cursor on the canvas
Comment : Tpoint type - defined as follows:
Type Tpoint = record
Pixels: Tcolor - sets the colors of the canvas pixels, X, Y - pixel coordinates. The Pixels property is useful 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 blue diagonal 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 - coordinates of the lower right corner.
Example : Draw a 60 px yellow-filled square 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 that is 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 ppolygon given by an array of coordinates.
Example : draw a filled rhombus connecting the midpoints of the sides of the shape
Var Xc,Yc:integer; // form client area center coordinates
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 an 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 hour hand.
Example
: draw an ellipse 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:= 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 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 an ellipse segment connecting the center of the ellipse with coordinates (x3,y3) and (x4,y4).
Example : present in the example given for the ARC method, the PIE method and get this result.
procedure textout(x,y:integer;Text:string); - displays the string passed in the Text parameter into a rectangle, the upper left corner of which is specified x,y coordinates. Font characteristics are set by the Font tool.
Example : write the name of the constructed graph at the bottom of the form.
Canvas.Font.Height:=20 ; // character height 20 pixels
Canvas.Font.Color:=clblue;
Canvas.TextOut(10, ClientHeight-24, 'SIN(X) function graph');
Graphic Components
Delphi offers a number of out-of-the-box components to improve user interface. These components are placed on the page Additional And System component palette.
ComponentImage(ClassTime) – 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).
Main properties :
autosize:boolean - if true, the component adjusts its size to the size of the loaded image; false by default.
Stretch:boolean - if true, the loaded value occupies the entire area of the component; default is false.
Canvas:Tcanvas - Used to draw inside the component at run time.
picture:Tpicture - Specifies the image placed in the component.
Main methods class picture:
procedure LoadFromFile(filename:string); - loads an image into the component from a file named Filename.
procedure SaveToFile(filename:string); -saves the image from the component to a file named Filename.
Componentpaint box - 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 an ellipse yellow color The 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 – bitmap button
The BitBtn button, unlike the standard one, can contain, in addition to the name (Caption), an image specified by the property Glyph. There is a set of standard BitBtn buttons, with predefined properties (with a specific image, caption and purpose) - the type of the standard button is selected through the property kind. Kind=(bkCustom, bkAbort,bkCancel, bkClose...)
Task number 1
Create an application that contains two Image components and 4 buttons on the main form ("Upload Image", "Build Geometric Shape", "Change Color", "Exit"), and allows you to:
a) load into the Image1 component a graphic image selected by the user in such a way that the image occupies the entire area of the Image component.
b) under the Image1 component, display the inscription “This is an image from a file.
(for any measurement of the dimensions and position of the componentImage1 inscription must
be strictly below the component).
c) draw a geometric shape inside the Image2 component: a filled segment of an ellipse connecting the middle of the Image component with the midpoints of the bottom and right sides of the Image component.
(with any change in the size and position 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 lets you randomly place multiple labels in an Image component (for example, the word "Hurrah!"). To implement, use a generator random numbers Randomize 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 with 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 shape that the PaintBox1 component is on).
Task number 5
WITH 
select the type of the drawn figure from the Radiogroup1 component, the fill color from the Radiogroup2 component and draw the selected figure in the Image component.
Task number 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 in the color selected by the user in the ColorDialog.
Task number 7
WITH 
create an application that allows you to:
select the name of the geometric figure from the ListBox list and draw the selected figure 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 number 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 number 9
select the name of the geometry from the ListBoxIII or IV quarter) and the fill color of the figure is selected
from RadioGroup components.
Task number 10
Create an application that allows the user to set the dimensions of the PaintBox1 component (in pixels).
Provide that the size of the side 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 is selected by the user in the ColorBox.
Task number 11
Create an application that allows you to:
select the position of the drawable from the Radiogroup componentin the Image component of the right triangle, set
the fill color of the shape or the color of the outline, depending on
enabling the Checkbox buttons. Color selection via
ColorGrid component.
Task number 12
Create an application that allows the user to set the dimensions of the PaintBox1 component (in pixels).
Provide that the size of the side 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 figure selected by the user in the Combobox (ellipse, rhombus, triangle and rectangle). The color of the shape is selected by the user in the ColorBox.
For example, you can change the color of a form like this:
form1.Color:= 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 size of the side cannot be text, cannot be a negative number, and cannot exceed the smaller size of the form.
b) divide the square with one or two diagonals, depending on the inclusion of the Checkbox buttons, and paint over 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 set the dimensions of the PaintBox1 component (in pixels).
Provide that the size of the side 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 rhombus inside one part, and draw any triangle inside the other part. The color of the shape is selected by the user in the ColorBox.
For example, you can change the color of a form like this:
form1.Color:= ColorBox1.Colors;
Task number 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 size of the side 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 (the color of the circles is allowed to be selected by the user through the color selection dialog box).
Task number 16
Create an application that allows the user to set the dimensions of the PaintBox1 component (in pixels).
Provide that the size of the side 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 checkerboard rectangle. The fill color is selected by the user in the ColorBox.
For example, you can change the color of a form like this:
form1.Color:= 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 on the OK button, Image1 draws a square with side X, and Image2 draws a right-angled triangle with equal legs, each of which has length X.
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 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 set the dimensions of 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 like this:
form1.Color:= ColorBox1.Colors;
To display graphical information in the Delphi library, components are provided, a list of which is given in Table. 6.
Table 6
Components for displaying graphical information
| Component | Page | Description |
| Image (image) | Additional | Used to display graphics |
| PaintBox (window for drawing) | System | Used to create an area on the form in which you can draw |
| DrawGrid (drawing table) | Additional | Used to display non-text data in rows and columns |
| Chart (charts and graphs) | Additional | The component belongs to the TeeChart family of components that are used to create charts and graphs |
| Chartfx (charts and graphs) | ActiveX | Chart and graph editor |
| FIBook (Excel pages) | ActiveX | Component for input and processing of numerical information |
| VtChart (Charts) | ActiveX | Diagram window |
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 an application that can contain graphics. This component is similar to the component String Grid, since the latter is derived from drawgrid. Therefore, in DrawGrid all properties, methods, events of the component are present String Grid, other than those related to the text, i.e. apart from properties Cells, Cols, Rows, Objects. From this point of view, the component StringGrid has much more potential than drawgrid, because it can store both images and texts in cells. And if you want to enter text into some cells drawgrid, then you will need to use methods for outputting text to the canvas for this, which is not very convenient.
Components DrawGrid and StringGrid have a canvas Canvas, where images can be posted.
There is a method cell rect, which returns the area of the canvas allocated for the 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 area of the canvas 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 by 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 because indexes start at 0. Note that if the cell dimensions are smaller than the size of the copied image, then only the left cell will appear in the cell. top part Pictures.
Component canvas image 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.
Convenient way inserting images into cells DrawGrid is to use an event handler OnDrawCell. These events occur for each table cell at the moment of its redrawing. The handler header looks like this:
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- highlighted 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 attributed to the means of displaying graphic information, since it simply represents various geometric shapes, suitably shaded. The main property of this component is shape(form), which can take the following values:
StRectangle - a rectangle;
StSquare - square;
StRoundRect - a rectangle with rounded corners;
StRouhdSquare - square with rounded corners;
StEllipse - ellipse;
StCircle - a 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) shape fill. You can see the fill at some Style values in Fig. 3.2. The third of the component's specific properties shape- pen(pen) that defines the line style.
Chart Component
Now consider the component Chart. This component allows you to build various charts and graphs that look very impressive. Component chart has a lot of properties, methods, events, so if you consider all of them, then you would have to devote an entire chapter to this. Therefore, we confine ourselves to considering only the main characteristics Chart. And the rest you can find in Delphi's built-in help, or just try them out by experimenting with diagrams.
Component chart is a container of objects Series- class descendants TchartSeries. Each such object represents a series of data characterized by a certain display style: one or another graph or chart. Each component chart 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 (for example, for pie charts) it will probably look ugly. However, in this case, you can set for one component chart several series of the same data with different type diagrams. Then, by making one of them active at each moment of time, you can give the user a choice of the type of chart that displays the data of interest to him.
Place one or two components chart on the form and look at the properties that open in the Object Inspector. Let us explain some of them.
AllowPanning - determines the user's ability to scroll the observed part of the chart during execution by pressing the right mouse button. Possible values: pmNone - scrolling is disabled, pmHori/ontal, pm Vertical or pmBoth - respectively, scrolling is allowed 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 fragment frame is drawn to the right and down, then this fragment is stretched to the entire chart field. And if the frame is drawn up and to the left, then the original scale is restored.
Title - defines the title of the chart.
Foot - defines the caption under the diagram. None by default. The label text is defined by the Text subproperty.
Frame - defines the frame around the chart.
Next to many of the listed properties in the Object Inspector, there are buttons with ellipsis 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 charts. Calling the Diagram Editor is also possible by double-clicking on the component chart or click on it right click mouse 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 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 where you can select the type of chart or graph. IN this case select Pie - Pie Chart. Using the Titles tab, you can set the title of the diagram, the Legend tab allows you to set the display options for the diagram legend (list of symbols) or remove it from the screen altogether, the Panel tab determines the appearance of the panel on which the diagram is displayed, the 3D tab allows you to change the appearance of your diagram: tilt, shear, thickness, etc.
When you are working with the Chart Editor and have selected a chart type, the components chart your form displays its appearance with conditional data entered into it. Therefore, you can immediately observe the result of applying various options to your application, which is very convenient.
The Series page, which also has a number of tabs, allows you to select additional display characteristics for the series. 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 chart segments: 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, such as Bar.
Exit the Chart Editor, select the lower Chart component in your application, and repeat setting properties for it using the Chart Editor. In this case, you will need to specify two series if you want to display two curves on the chart, and select the Line chart type. Because the we are talking about graphs, you can use the Axis and Walls tabs to set the coordinate characteristics of the axes and three-dimensional faces of the graph.
On this design appearance application ends. It remains to write the code that specifies the data that you want to display. For the test application, let's just define some constant data in the pie chart and some functions in the graphs.
To set the displayed values, use the Series methods. Let's focus on three main methods.
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 chart. Parameter AValue corresponds to the added value, parameter ALabel- a label that will be displayed on the chart 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 match the argument and function. Options ALabel and AColor the same as in the method Add.
Thus, the procedure for loading data in our example may look like:
constAl=155; A2=251; A3=203; A4=404; var i:word; begin
With Seriesl do begin
Add(Al,"Shop l",clYellow);
Add(A2,"Design 2",clBlue);
Add(A3,"Floor 3",clRed);
Add(A4,"Design 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 the data during the operation of the application.
This concludes our introduction to the component. Chart. True, we considered only a small part of its capabilities.
“Displaying graphical information in Delphi” Theme plan: 1.С С pppp oooo ssss oooo bbbb yyyy v v vyyyy vvv oooo dddd aaaa yy grrrr aaaa ffff iii hhhh eeee ssss kkkk oooo yyyy nnnn ffff oooo rrrr mmmm ahhh zzzz iiiiii iiiiii c c c c D D D D eeee llll pppp hhhh iiii O O tttt ooooh bbbb rrrr aaaa zhzhzhzh eeee nnnn eeee eeee k k k aaaa rrrr tttt nnnn oooo kkkk O O tttt oooo bbbb rrrr ahhh zhzh eeeeeeeeeeeeeeeeeeeeeeeee y yeeee oooo mmmm eeee tttt rrrr yiii hhhh eeeesssssssss i i d d d aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaammmmmmmm....
1. Methods for displaying graphic information. There are several ways to display graphical information in Delphi: Output of pre-prepared images (Image, Shape components); P Construction of graphs and charts (component Chart, etc.); F Imaging programmatically(Canvas object).
2.Display 2.Display pictures. We examined the display of images using the Image component in periodically changing the displayed image in the Image components. PPPP EDURRRREEEE YYYE TTTT IIII n N N n AAAAAA PP PRRR IIII MMMMEEEE RRRRR ...
3. Display 3. Display of geometric shapes. And You can create simple drawings from several Shape components. P Programmatically changing the position (.Left,.Top), size (.Width,.Height) and color (Brush.Color) of the Shape components in the figure, you can implement elements of the simplest animation. R R R R aaaa sssssssssss mmmm oooo tttt rrrr eeee tttt b pp pp rrrr iiiiii mmmm eeee rrrr...
4. Construction 4. Construction of graphs and charts. Diagrams are intended for a more visual representation of arrays of numerical data, their visual display and analysis. RRRR iiiiii mmmm eeee rrrr.... There are several components for plotting charts in Delphi, one of them is the Chart component (section TeeChart Std).
Graphs and diagrams. The data to display is usually passed to the Chart programmatically, for 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 chart rrrraaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaathat that is that is rrrrrrrrrrrr y y y y y y y y y y y y y = = = = S S S S iiii nnnn ((((xxxx))))
Next: Laboratory work """" OOOO tttt oooo bbbb rrrraaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa!;aaaaaaaaaaaaaaaaaaaaaaa have been XXXX FFFF IIII GGGG UUUU Rrrr, and and XXXXX A A A A ANNNNNNNNNNE MMMM AAAAA AAAAA IIIIIAIA ”” ”” ”” .... Task: 1) develop the application for the performance of the simplest animation by periodically changing the displayed picture in Image components. (The number of pictures is at least three, choose the pictures yourself).
Next: Laboratory work """" PPPP oooo ssss tttt rrrr oooo eeee nnnn iiiiii eeee yy y gr rrrr aaaa ffff iii kkkk oooo vvvv i i dd dd iii AAAA yyyy rrrr aaaa mmmm mmmm """".. ..Assignment: 1) Modify the application from laboratory work 9 (Display data in a table). Add the ability to display some data from the table on a bar or pie chart. 2) Construct a graph of a given function.
Working with graphics in Delphi it's not just lines and drawings, but also printing text documents. Therefore, in Delphi working with graphics need to take a little time. Work with graphics in Delphi involves accessing the canvas - the Canvas property of the components. Canvas Delphi it is a canvas that allows the programmer to have access to each point (pixel), and, like an artist, to display what is required. Of course, draw pixel by pixel for work with graphics in Delphi is not necessary, the Delphi system provides powerful graphic tools that make the programmer's job easier.
When working with graphics in Delphi, the programmer has at his disposal the canvas (canvas, canvas - property Canvas Delphi components), pencil (property pen), a brush (Brush property) of the component or object on which it is supposed to draw. 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 rather complex graphs of mathematical and engineering content, as well as drawings. Besides, work with graphics allows you to use such resources in Delphi Windows as graphics and video files.
Of course, not all components in Delphi have these properties. On the tab Additional located specialized component TImage, specifically designed for drawing, but also a property Canvas have, for example, such components as ListBox, ComboBox, StringGrid, as well as the Form itself, which places our components! In addition, Delphi uses 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 given color to any point of the canvas. Each pixel can be assigned any available windows color. For example, executing the statement
Image1.Canvas.Pixels:=clRed;
Will result in drawing a red dot with coordinates . You can get the color of a pixel by reverse 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 dot, it must be assigned color $000000FF.
For standard colors, Delphi defines a set of text constants. You can see it by opening the Color property in the Object Inspector, for example, of the same Form.
The following table contains some properties and methods of the canvas:
| Procedure TextOut(X, Y: Integer; const Text: WideString); Produces a string output Text starting at (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 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). The address (X, Y) becomes the current position point. |
| 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 the image on the canvas. |
The first thing we will do is initialize the variables when the program starts. It is necessary to determine the dimensions of the drawing area (we will create a global variable Rect of the TRect type 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 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. So let's add a procedure page in the procedure FormCreate. Now it's beautiful. Next, we will write a simple procedure for erasing, cleaning Image. It will need to be called before any image update, otherwise the previous and next images will overlap.
procedure TForm1.clearing;
begin
Image1.Canvas.FillRect(Rect); //Rectangle Rect filled with white, the image is erased.
end;
Now it's the turn of the text output procedure itself. Let's start displaying the text from the point (3, 3) - the upper left corner of the sheet, with a small indent of 3 pixels. Each subsequent line will be shifted to the height of the line:
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 for text output. 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:=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
... Printing a Document...
end;
Printer.EndDoc;
The width and height of the printer canvas are available through properties Printer.PageWidth And Printer.PageHeight. You can finish printing on one page and start printing on another using the method Printer.NewPage.
