Ways to display graphical information in Delphi. A selection of graphics capabilities of Delphi. Image component and PaintBox

slide 2

"Vibration graphic information at Delphi» Topic plan: Ways to display graphical information in Delphi. Displaying pictures. Visualization of geometric shapes. Pobudova graphic and diagram.

slide 3

1. Methods for displaying graphic information. Delphi has a few methods for displaying graphical information: Displaying a range of prepared images (components Image, Shape); Pobudova graphic and diagram (component Chart and int.); Image molding programmatically(Canvas object).

slide 4

Displaying pictures. Displaying images behind the help of the Image component, we looked at one of the previous topics. Here we will look at the example of the creation of the simplest animation in a way of periodic change of the image, which is displayed in the Image components. Jump from the butt.

slide 5

Visualization of geometric shapes. Displaying the simplest geometric shapes on a form is done using the Shape component.

slide 6

Visualization of geometric shapes. The main powers of the Shape component:

Slide 7

Visualization of geometric shapes. From the number of Shape components, you can create clumsy little ones. By programmatically changing the position (. Left, . Top), size (. Width, . Height) and color (Brush. Color) of the Shape components, you can change the elements of the simplest animation into a small one. Look at the example.

Slide 8

Pobudova graphic and diagram. The diagrams are used for the first presentation of arrays of numerical data, their visual representation and analysis. butt. To encourage Delphi charts, there are a few components, one of them is the Chart component (split by TeeChart Std).

Slide 9

Pobudova graphic and diagram. View of the Chart component after it is inserted on the form:

Slide 10

Pobudova graphic and diagram. The "Object Inspector" cream allows you to gain access to the powers of the Chart component by opening a special dialog window (right button on the component \ Edit Chart…) Add a data series Change the type of charts

slide 11

Pobudova graphic and diagram. Select the type of diagrams:

slide 12

Pobudova graphic and diagram. Power settings for coordinate axes (Axis):

slide 13

Pobudova graphic and diagram. Data for displaying sounds are transmitted to Chart programmatically, butt: Series1.Clear; (clear series) for i:=1 to N Series1.addxy(i, A[i], ‘’, clGreen); Value of the X axis Value of the Y axis Signature of the X axis Number of data on the diagram Look at the example of the graph of the function y = Sin(x)

Slide 14

Dali: Laboratory work No. 13.1. "Vibration of pictures and geometric figures, their animation". Tasks: 1) Development of add-ons for the creation of the simplest animation along the way of the periodic change of the image, which is displayed in the Image components. (The number of pictures is not less than three, the pictures are chosen independently).

slide 15

Task: 2) Invent and draw little ones from the Shape components. Programmatically change the position, change the color or color of the Shape components in the little one to create the elements of the simplest animation.

slide 16

Dali: Laboratory work No. 12.2. "Pobudov graphic and diagram". Task: Modify the program laboratory work No. 9 (Review of the data in the table). Add the possibility of displaying current data from the tables on the histogram or circular diagram. 2) Induce the schedule of the given function.

View all slides

"Displaying graphical information in Delphi"
Topic plan:
1. Ways of visualizing graphic
information in Delphi.
2. Visualization of pictures.
3. Variation of geometric
figures

Description of the presentation with four slides:

1 slide

Description of the slide:

2 slide

Description of the slide:

The middle of the visual Delphi programming, like and Windows, support graphical interface koristuvach (GDI - Graphic Delphi Interface). Delphi has two ways of displaying graphical information: displaying a backlog of prepared images; painting from the program.

3 slide

Description of the slide:

The first way to base on the selected components of Image and Shape. You can use a ready-made picture (pictogram) or create it yourself, using the Image Editor. Another way is to programmatically shape the image using a Canvas object.

4 slide

Description of the slide:

Delphi can have its own special object, similar to the design of Canvas. It is more accessible for less than an hour of robotic programs, so that it is possible to cheat on it less often from the program, having written required code my Object Pascal. As an object of the canvas's power, you can paint on its surface. The most suitable candidates for this role are the form itself and the special PaintBox component.

5 slide

Description of the slide:

Object Canvas Power: Pen (Feather) - power for painting lines and between geometric shapes. The pen follows the commands of the graphic cursor i, has its own line, may have its own contribution to power: Color - sets the color of the line (for the black color); Mode - painting style (maє impersonal value, yaki not to be found here); Style – line style, which can be used as a value: psSolid – sucilna (for locking); psDosh - stroke; psDot - dotted line; psDoshDot - dotted stroke (that in. dominance); Widh – line width (1 pixel per lock);

6 slide

Description of the slide:

Brush (Penzel) - power for filling figures, which may have such contributions of power: Color - color of the penzle (for locking - white); Style - a penzl ornament, which can have a meaning: bsClear - a succulent rozmalovka; bsHorizontal - horizontal lines; bsVertical - vertical lines; bsFDiagonal - left diagonal lines; bsBDiagonal - right diagonal lines; bsCross, clitina; bsDiagCross - braid of clitin;

7 slide

Description of the slide:

Font (Font) - the power of displaying the text, there may be such contributions of power: Color - color of symbols; Height - font height in pixels; Name - name of the font; Size – font size; Style - font style, which can be set to the following values: fsBold - bold; fsItalic - italic fsUnderline - underline; fsStrikeOut - crossovers;

8 slide

Description of the slide:

PenPos (Position of the pen) - the power to select the current position of the painting (indicating the position of the pen in the painting area at the given moment); Pixels - power-array for recording and reading the coordinates of four points of the painting area ("canvas").

9 slide

Description of the slide:

Canvas object method MoveTo(x,y: integer) – move the pen from the current position to the point from the given x coordinates, without painting the line; LineTo(x.y: integer) - move the pen from the current position to the point from the given x coordinates, along the crossed lines; Arc(x1, y1, x2, y2, x3, y3, x4, y4: integer) - small arc of an ellipse inscribed in a rectangle with coordinates (x1, y1) and (x2, y2). The arc is defined by the radii of the ellipse, which passes through the points (x3, y3) and (x4, y4);

10 slide

Description of the slide:

Chord (x1, y1, х2, y2, х3, y3, х4, y4: integer) - small chord of the elіps behind the description, point to the Arc method; Ellipse (x1, y1, x2, y2: integer) upper hood at the point (x1, y1) and the lower right corner at the point (x2, y2); FillRect (Rect (x1, y1, x2, y2: integer)) - fill the rectangle with color, set the flow penzl (Brush). Vicorist function Rect, which represents a rectangle with given coordinates;

11 slide

Description of the slide:

FloodFill(x, y: integer; Color: TColor; FillStyle: TFillStyle) – filled with a current color, set the power to Brush: if FillStyle=fsBorder – a closed area from a point with coordinates x, y to the boundary, assigned by Color; with FillStyle=fsSurface - that surface area, as it may Color; Pie (x1, y1, x2, y2, x3, y3, x4, y4: integer) - small sector of the ellipse inscribed in a rectangle with coordinates (x1, y1) and (x2, y2). The sector is defined by two radii of the ellipse, which pass through the points (x3, y3) and (x4, y4);

12 slide

Description of the slide:

Polyline (Points: array of TPoint) – draws a laman line, consecutively passing points to the Points array; Polygon (Points: array of TPoint) - contains multiple loops, successively adding points to the Roints array. Vіdrіznyaєtsya vіd method Polyline tim scho automatically podnuє kіnets lamanoї z її cob; Rectangle (x1, y1, x2, y2: integer) – a small rectangle with a left upper edge at the point (x1, y1) and a lower right edge at the point (x2, y2);

13 slide

Description of the slide:

Retresh - the method of recalling for the need to remake the image; RoundRect (x1, y1, x2, y2, x3, y3: integer) - small rectangle with rounded corners. Kuti are painted like a quarter ellipse with a width of x3 and a height of y3; TextOut (x, y:integer, Text:String) - output to the text specified in the Text parameter. The text fits in a rectangle, the upper left corner of any possible coordinates x, y.

For displaying graphic information Delphi libraries transferring components, a list of which is given in Table. 6.

Table 6

Components for displaying graphical information

In addition, it is possible to enter graphic information on the surface of any window component that may have power Canvas- Canvas.

Image Tables - DrawGrid and StringGrid components

Component DrawGrid vikoristovuetsya for the creation of an appendix of the table, as you can revenge graphic images. Whole component similar to component String Grid, the remains of the rest drawgrid. Tom in DrawGrid all powers, methods, sub-components are present String Grid, krim yakі stosuyutsya text, tobto. crime of power Cells, Cols, Rows, Objects. Thing I see component StringGrid may be more possible, lower drawgrid, You can save the shards of wine in the middle and images of the text. And if you want to add text to the middle drawgrid, then you will need to write for some method of visualizing the text on the canvas, which is not easy.

Components DrawGrid and StringGrid to sew a canvas Canvas, on which you can place an image.

Є method cell rect, which rotates the canvas area, introduced the tasks of the middle. Tsey method is assigned as

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

de ACol and ARow- Index and rows, which start from 0, on the reline of some sortings of the middle. Rotate this function area to the canvas area, so you can paint the necessary image. For example, operator

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

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

copy method CopyRect in the middle (1,1) of the table DrawGridl component image bitmap This comirka is the other levoruch and the other animal in the table, the shards of the index start at 0. Check, if the comirki is smaller, the image is copied lower, then only the left upper part of the picture will appear in the commissary.

Image on component canvas DrawGrid and StringGrid, yak and on the canvas of any component, shilne to erasure when the program is overwritten by other programs, or, for example, when the program is burned.

In a manual way bringing the image to the middle DrawGridє vikoristannya obroblyuvacha podіy OnDrawCell. Tsі podії come for the skin center of the table at the time of її repainting. The title of the obrobnik can be seen:

procedure TForml.DrawGridlDrawCell(Sender: TObject;

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

Parameter State show the middle. Vіn є impersonal, yak can revenge the following elements: gdSelected- visions of the middle, gdFocused- the center, which is known at the focus, gdFixed- middle of the fixed area of ​​the table. Parameter State it is possible to vikoristovuvat for different character fermentation in different countries.

Shape Component

Shape Component only mentally can be used to help visualize graphic information; The main power of this component is shape(form), how can you type the value:

StRectangle - a rectangle;

StSquare - square;

StRoundRect - a rectangle with rounded corners;

StRouhdSquare - a square with rounded corners;

StEllipse - elips;

StCircle - colo.

Other source of power of the component - Brush(penzlik). Tsya dominion є object type tbrush, draw a number of sub-powers, zokrema color (Brush.Color) ta style (Brush Style) fill shapes. Filling at the same values ​​of Style can be bachiti in fig. 3.2. Third specific power component shape- Pen(Feather) that defines the style of the lines.

Chart Components

Now we can see the component Chart. This component allows you to create different diagrams and graphics that look even more effective. Component chart maє impersonal authorities, methods, podіy, even if you look at them, who would have had a chance to dedicate a chapter to the whole. That's why we're obsessed with the look of less than the main characteristics Chart. And you can learn about Delphi's solutions, or just try them out, experimenting with diagrams.

Component chartє object container Series- falling class TchartSeries. Such an object represents a series of data, which are characterized by a sing-song style of display: one or the other graph or a diagram. Leather component chart you can revenge the sprat series. If you want to change the graph, then the skin series will match one curve to the graph. If you want to draw diagrams, then for certain types of diagrams you can put one on one sprig of different series, for others (for example, for circular diagrams) it’s, ymovirno, looks ugly. However, in whichever way you can put for one component chart sprat of series of the same data different type diagrams. Then, roblyachi at the skin moment, one of them is active, you can give a corystuvache vibir to the type of diagrams, which shows the data, which to chirp.

Mix one or two components chart on the form and marvel at the authority that was observed in the Inspector of Objects. Let us explain some of them.

AllowPanning - determines the possibility of scrolling and watching part of the graphics for an hour of watching, pushing the mouse button to the right. Possible values: pmNone - scrolling is disabled, pmHori/ontal, pm Vertical or pmBoth - scrolling is allowed in horizontal direction, but not in both directions.

AhowZoom - allows you to quickly change the hour of the image scale, viewing fragments of the diagrams or graphics with the mouse cursor. Thus, the frame of the fragment is drawn to the right and down, the whole fragment is stretched across the entire field of the graph. And if the frame is drawn uphill and to the left, then the outside scale is restored.

Title - sets the title of the charts.

Foot - signifies the signature under the diagram. For zamovchuvannyam vіdsutnya. The text of the signature is assigned for the help Text.

Frame - sets the frame next to the diagrams.

A number of redundant authorities in the Inspector Object are expanded buttons with three dots, which allow you to click on the other side of the Diagram Editor - a rich side window that allows you to set all the authorities of the diagrams. Editor's Wiklik chart Or click on the new one with the right mouse button and select the Edit Chart command from the splicing menu.

Expand the underwire clatter on the upper component Chart. You can go to the window of the editor of the diagram on the side of the Chart, so you can bookmark it. You will be clicked on the Series tab in front of you. Press the Add button - add a series. You can spend time at the window, you can choose the type of diagrams or graphics. In this case, choose Pie - a pie chart. Skoristavshis bookmark Titles VI can zadati header dіagrami, bookmark Legend dozvolyaє zadati parametric vіdobrazhennya Legends dіagrami (poznachen list) abo vzagalі pribrati її of this function the, Panel tab viznachaє view panelі on yakіy vіdobrazhaєtsya dіagrama, 3D daє tab you mozhlivіst zmіniti zovnіshnіy viglyad vashoї dіagrami Nakheel , zsuv, tovshchina toscho.

If you work with the Diagram Editor and choose the diagram type, the components chart on your form, it looks like it looks like intellectual tributes brought before it. Therefore, you can immediately check the result of setting various options to your program, which is more convenient.

The Series page, also has a number of bookmarks, giving you the opportunity to select additional characteristics for displaying a series. So, for pie charts, on the Format tab, enable the Circled Pie option, so that you can ensure that the Chart component is displayed by charts at the visual stake for any size. On the Marks tab, the buttons of the Style group indicate what will be written on the labels, which can be seen up to 10 segments in the diagrams: Value - value, Percent - hundreds, Label - name them thinly.

You can, if you want, add one more same series to this Chart component by pressing the Clone button on the Series tab of the Chart side, and then for this new series, press the Change button and select a different type of diagrams, for example Bar.

View from the Chart Editor, see the lower Chart component for your addendum and repeat for the new authority task with the help of the Chart Editor. In this way, you will need to specify two series, if you want to display two curves on the chart and choose the Line type as diagrams. For more information about graphs, you can use the Axis and Walls tabs to set the coordinate characteristics of the axes and trimmer faces of the graph.

On what project sane looking the programs are terminated. It was left to write the code, which is the data, which you want to display. For the test program, let's put constant data in the circle diagram, and the actual functions in the graphs.

To set the value, it is necessary to win the Series method. Let's focus on three main methods.

Method Clear clearing a series of data that were entered earlier.

Method Add:

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

allows you to add a new point to the diagrams. Parameter AValue specify the value that is being added, the parameter ALabel- mark, as shown on the diagram and in the legend, AColor- Kolir. Parameter ALabel- not binding, yoga can be put empty: ' '. Method AddXY:

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

allows you to add a new point to the graph of the function. Parameters AXValueі AYValue match the argument of that function. Parameters ALabel and AColor tі w, scho th methodі Add.

In this rank, the procedure that secures the acquisition of data from our butt, 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, "Floor 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 you will need, for example, for an hour, the programs will need to update the data.

On whom we will finish familiarity with the component Chart. True, we have seen only a small part of the possibilities.

"Vіdobrazhennya grafіchnoї Informácie in Delphi» plan by: 1.Z tstststsііііііііі in in in in D D D D eeee llll pppp hhhh iiii O O TTTT OOOO bbbb rrrr aaaa zhzhzhzh їїїї nnnnііііїїї up to a aaaa ppp ttttііі n g g eeee oooo mmmm eeee TTTT rrrr IRS hhhh eee ssss kkkk iii xxxxxx ffff iiiiii rrgg uuuu rrrr P Pooooo ssss tttt rrrrroooooee nnnn iiiiii yyiii AAAA rrrrrrrr AAAA mmmm mmmm.

1. Methods for displaying graphic information. Delphi has a few methods for displaying graphical information: Drawing for a range of image preparations (Image, Shape components); P Pobudova graphs and diagrams (component Chart and int.); Forming an image programmatically (Canvas object).

2.Display 2.Display pictures. The Image MIGE MIGE MIGE PRIGE OF THE DODDD DDDD LLC LLC YYYAI II I II II II ї dddddddddddddddshchshcheii of the XXXX t. PPPP їїїї rrrr їїїї yyyy ttttiiiiii n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n p

3. Vibration 3. Vibration of geometric shapes. І z k_lkoh Shape components you can create clumsy little ones. Programmatically changing the position (.Left,.Top) of the size (.Width,.Height) and the color (Brush.Color) of the Shape components in a little one, you can change the elements of the simplest animation. R R R R ahhh sssssssssssssssssssss mmmm oooo tttt rrrr eeee ttttt p p p prrrr iiiiii mmmm eeee rrrr.

4. Pobudova 4. Pobudova graphic and diagram. The diagrams are used for the first presentation of arrays of numerical data, their visual representation and analysis. To create charts in Delphi, there are a few components, one of which is the Chart component (split by TeeChart Std).

Graphics and diagrams. Data for displaying sounds are transmitted to Chart programmatically, butt: Series1.Clear; (clear series) for i:=1 to N do Series1.addxy(i, A[i], clGreen); Values ​​on the X-axis Values ​​on the Y-axis Values ​​on the Y-axis Signature on the X-axis Color of data on the charts zzst iiiiiiiii y y y y y = = = = S S S S iiii nnnn ((((xxxx))))

Dalі: Laboratory robot ““““ TOVO ttttooobbbbbrrraaaazhzhzh eeee nnnn iiiiiieeee k k k аааа rrrr ttttiiiiii nnnnnooookkkt i h y g eooooo xxx ffff yiii yyyy rrrr, and and and and xxxx a yiii yyyyyyyyyyyyyyyyyyyyyyyyyyy "... Tasks: 1) Develop supplements for the creation of the simplest animation along the way of a periodic change in the image. (The number of pictures is not less than three, the pictures are chosen independently).

Dalі: Laboratory robot ““““PPPP oooo ssss tttt rrrr oooo їїєї nnnniiiiiiiiiієї y y y grrrr аааа ffff iiiiii kkkk oooo vvvv i і d d ііііі ааааа” ї .. Laboratory work: 9 Display of data in tables). Add the possibility of displaying current data from the tables on the histogram or circular diagram. 2) Induce the schedule of the given function.