How does delphi use basic drawing functions to draw statistical charts?

How does delphi use basic drawing functions to draw statistical charts?

A drawing tool that comes with Windows cannot meet our drawing needs in any way. Many effects need to be implemented in other tools. How are these advanced functions implemented? How can we manipulate some basic attributes and functions so that they can ultimately achieve what we want? Here we will draw a Statistical Chart to illustrate these problems.

Solution ――
Now, let's take a look at the specific problem and discuss the problem of drawing.
Drawing tools are the concrete implementation of basic elements. For Beginners, there is still a good reference value. In Delphi 5, there is a built-in engineering example "... Borland \ delphi5 \ demos \ doc \ graphex ", this example can implement some basic drawing functions. If you add more modifications to this example, you will surely gain some benefits. Its details are not listed here. Code Now, interested readers can find this example by themselves. I just want to discuss this issue comprehensively. The soul of writing drawing software using Delphi lies in operating canvases, brushes and brushes, and mining their attributes and related parameter settings as much as possible.
(1) Canvas
The relationship between the canvas, paint brush and brush is clear. actually, paint brushes and brushes are a canvas attribute. the canvas is only an attribute of component objects such as tform, timage, and tshape. It deals with image-related information. its main functions can be summarized as follows:
1. Specify the usage type of paint brushes, brushes, and fonts;
2. Draw and fill in a line or image of the specified shape;
3. Modify and modify the image;
The main attributes of the canvas are:
Brush-specify the style of the filled image and background
Canvasorientation -- specifies the positioning type of the canvas, which has two attributes: colefttoright and corighttoleft;
Cliprect -- specify the border of the cut rectangle;
Copymode -- specifies the copy mode of the image;
Font -- specifies the font used on the canvas;
Handle -- specify the device description table of the window GDI object for the canvas;
Lockcount -- specifies the number of times the canvas is locked by another thread;
Pen -- specifies the paint brush used on the canvas. For details, see the following description;
Penpos -- specifies the current position of the paint brush;
Pixels -- specify the pixel color of the current cut rectangle;
Textflags: Specifies the font display mode on the canvas. Optional values include eto_clipped, eto_opaque, eto_rtlreading, eto_glyph_index, eto_ignorelanguage, and eto_numericslocaleto_numericslatin;
The canvas-related API functions and their comments are as follows:
Arc -- draw an arc in the specified way;
Brushcopy: Copies the bitmap to the rectangle of the specified canvas, and replaces the color of the bitmap with the color of the canvas brush;
Chord -- draw a string in the specified mode;
Copyrect-copy part of the image from one rectangle area to another;
Draw -- draw a picture at a specified position with a specified parameter;
Drawfocusrect-draws a focus rectangle Based on the specified focus style through an exclusive or operation;
Ellipse -- draws an elliptic according to the specified parameter;
Fillrect -- fill a rectangle with the specified brush;
Floodfill -- fill an area in the specified device description table with the selected brush;
Framerect -- draws a rectangle border using the specified method;
Lineto -- use the current paint brush to draw a straight line from the current position to the specified point;
Lock -- prevent other threads from drawing on the canvas;
MoveTo -- specifies a new position of the current paint brush;
Pie -- draw a pie chart in the specified way;
Polybesuppliers -- draw multiple besels in a specified manner;
Polybezierto -- draw multiple besels and update the current paint brush position value as specified;
Polygon -- draw a polygon composed of any sequence of multiple vertices;
Polyline -- draw a series of polygon using the current paint brush;
Rectangle -- draw a rectangle;
Roundrect -- draw a rounded rectangle;
Stretchdraw -- draws a drawing using the specified drawing parameters in the specified rectangle area;
Textextent -- return parameters such as the pixel width and height of characters set using the current font;
Textheight -- returns the pixel height of the character set using the current font;
Textout -- draw text at the specified position and update the current position of the paint brush;
Textrect-draw text in a cut rectangle area;
Textwidth -- returns the pixel width of the character set with the current font;
Trylock -- lock the canvas that is not currently locked;
Unlock-Unlock the canvas currently locked;
Here are two small examples:
Procedure tform1.button2click (Sender: tobject );
VaR
Arect: trect;
Begin // achieves the shear effect;
With image1.canvas do
Begin
Copymode: = cmwhiteness; // sets the replication mode;
Arect: = rect (0, 0, image1.width, image1.height );
Copyrect (arect, image1.canvas, arect );
Copymode: = cmsrccopy; // restore the copy mode;
End;
End;

Procedure tform1.button3click (Sender: tobject );
VaR
W: word;
Begin // draw a colored line in the window;
For W: = 10 to 200 do
Canvas. pixels [W, 10]: = RGB (random (255), random (255), random (255 ));;
End;
Flexible use of these functions and their internal parameters will give us unexpected results;

(2) paint brushes
A paint brush is a GDI object that defines a method for drawing a straight line or contour.
The paint brush has five attributes: color, handle, mode, style, and width.
Color: determines the RGB color of the specified line or contour.
Handle -- points to the handle of the window paint object.
Mode -- specifies how the paint brush draws a line on the canvas. This definition in the help document is (all starts with PM ):
Type tpenmode = (pmblack, // always black;
Pmwhite, // always white;
Pmnop, // The color remains unchanged;
Pmnot, // reversed canvas color;
Pmcopy, // the paint brush color specified in the color attribute;
Pmnotcopy, // reverse the paint brush color;
Pmmergepennot, // the combination of the paint brush color and the background color of the canvas;
Pmmaskpennot, // the combination of the paint brush color and the background color after the reversed color;
Pmmergenotpen, // combine the reversed color of the paint brush with the canvas background color;
Pmmasknotpen, // The combination of canvas color and paint color after the reversed color;
Pmmerge, // The combination of paint brush and canvas background color;
Pmnotmerge, // The combination of paint brush color and canvas background color;
Pmmask, // The combination of paint brush and canvas background color;
Pmnotmask, // use pmmask to reverse the image. Combine the paint brush with the canvas background color;
Pmxor, // take any color in the paint brush or canvas background;
Pmnotxor // returns the reversed pmxor color from the paint brush or canvas background;
);
Style -- specifies the paint brush operation style. The definition in the online document is (all starting with PS ):
Type tpenstyle = (pssolid, // the paint brush is ──
Psdash, // the paint brush is ------
Psdot, // the paint brush is ......
Psdashdot, // the paint brush is _._._.
Psdashdotdot, // the paint brush is _.._..
Psclear, // the paint brush is transparent
Psinsideframe // the paint brush is solid but jitters when it is set to greater than 1;
);
In addition, there are other extended paint style definitions in windows. Pas, only on special supported devices.
Valid, such as ps_endcap_round and ps_join_round;
Width -- specifies the width of the paint brush to be used, in pixels.
Paint-related functions include:
Createpen -- creates a paint brush in a specified style;
Createpenindirect -- create a paint brush Based on the logpen data structure;
Extcreatepen -- create a geometric paint brush with the specified style, width, and brush attributes;

(3) brushes
The paint brush defines the GDI object filled in the area. The paint brush is an 8x8 pixel area and can be drawn in the specified settings.
Secondary. The brush can not only be solid, but also be composed of different bitmap patterns.
The attributes of a brush include bitmap, color, handle, and style:
Bitmap -- specifies an external bitmap file to fill the specified area. If the specified image is larger than the Filled Area,
Only the upper left corner and the filling area are valid, and the rest are automatically dropped.
Color -- specifies the color of the brush. This attribute is invalid when the brush style is bsclear.
Handle -- points to the specified device window.
Style -- specifies the fill style of the current brush. The definitions in the online document are (all starting with BS ):
Type tbrushstyle = (bssolid, // Fill Format: Object Filling
Bsclear, // Fill Format is transparent fill
Bshorizontal, // Fill Format ------
Bsvertical, // The filling format is |||||
Bsfdiagonal, // Fill Format /////
Bsbdiagonal, // The filling format is \\\\\
Bscross, // Fill Format: ++
Bsdiagcross // Fill Format: XXXXX

);
API functions related to brushes include:
Createbrushindirect -- create a brush Based on logbrush;
Createdibpatternbrushpt -- creates a brush using a device-independent bitmap to specify the brush mode;
Createhatchbrush-creates a brush with shadow mode. The shadow mode is a constant starting with HS;
Createpatternbrush -- creates a brush using a bitmap to specify the brush mode;
Createsolidbrush -- create an entity color brush;
Getbrushorgex -- obtains the origin of the selected brush in the specified device description table;
Getsyscolorbrush -- get the handle of the logic brush related to the specified color index;
Setbrushorgex -- set the source of the selected brush in the specified device description table;

(4) drawing and filling related API functions;
Beginpaint -- prepare to paint in the specified window or fill in the specified area;
Drawanimatedrects -- NT supports functions and draws a rectangle with a swimming border;
Drawcaption -- NT supports functions and assigns values to the title of a specified window;
Drawedge -- draw one or more borders for a specified rectangle;
Drawfocusrect -- draw the focus rectangle;
Drawframecontrol -- draws a border control of the specified type and style;
Drawstate -- NT supports functions to indicate the state of a visible image;
Drawstateproc -- NT supports functions and calls the function that marks the state of an image by drawing a visual effect;
Drawtextex -- NT supports functions to output formatted text in a specified area;
Endpaint -- end painting;
Excludeupdatergn -- remove the invalid part of the window (update area) from the cropping area;
Gdiflush -- make the current GDI flash;
Gdigetbatchlimit -- obtains the number of buffer GDI functions;
Gdisetbatchlimit -- set the number of buffer GDI functions;
Getbkcolor -- get the background color;
Getbkmode -- obtains the background mode;
Getboundsrect -- get the boundary rectangle;
Getrop2 -- get the current drawing mode;
Getupdaterect -- obtains the smallest rectangle of a specified window;
Getupdatergn -- Obtain the region of the invalid zone in the description window;
Getwindowdc -- get the window DC;
Getaskwrgn -- get the window area;
Graystring -- draws gray text at the specified position;
Invalidaterect -- invalidate the rectangle specified by DC;
Invalidatergn -- invalidate the rectangle specified by DC;
Lockwindowupdate -- disable or allow painting in a specified window;
Outputproc -- call the output process to deliver text to graystring;
Paintdesktop-functions supported by NT: Fill the cropping area with the specified Desktop color or wallpaper in the specified window area;
Redrawwindow -- Update the specified area or rectangle of the customer area;
Setbkcolor -- set the background color;
Setbkmode -- set the background mode;
Setboundsrect -- set the boundary rectangle;
Setrectrgn -- set the rectangular area;
Setrop2 -- set the current drawing mode;
Setmediawrgn -- set the window area;
Updatewindow -- Update window;
Validaterect -- make the specified rectangle in the customer area valid;
Validatergn -- make the specified region in the customer zone valid;
Windowfromdc -- get the handle related to the specified window;

Specific implementation ――
1. This example uses a common statistical chart to illustrate the problem. In this example, the Statistical Chart can be dynamically drawn and the shape and color of the Statistical Chart can be customized. Before explaining the problem Program Some of the more complex functions or Algorithm :
Function ――
1. polygon (points: array of tpoint)
Used to draw a specified polygon. It is a set of pre-defined points. This set can be defined before use or when used. This example belongs to the latter;
2. Pie (x1, Y1, X2, Y2, X3, Y3, X4, Y4: longint)
Used to draw a pie chart. a pie chart is actually a part of an ellipse. Among these parameters, (x1, Y1) and (X2, Y2) define the rectangle that framed the pie chart, and the radiation emitted from the center of the elliptic goes through (X3, Y3) and (X4, Y4) to cut out a pie chart.
3. formatfloat (const format: string; Value: Extended)
The function is used to format a string in the specified format. The format specifies the format, and the value specifies the text or other data to be formatted. The following examples are provided for our reference:
Format 1234-1234 0.5 0
1234-1234 0.5 0
0 1234-1234 1 0
0.00 1234.00-1234.00 0.50 0.00
#### 1234-1234. 5
#,## 0.00 1,234.00-1,234.00 0.50 0.00
#,## 0.00; (#,## 0.00) 1,234.00 (1,234.00) 0.50 0.00
#### 0.00; zero 1,234.00-1,234.00 0.50 zero
0.000e + 00 1.234e + 03-1.234e + 03 5.000e-01 0.000e + 00
#### E-0 1.234e3-1.234e3 5e-1 0e0
In this example, two decimal places are retained after the decimal point, so "###. ##" is used. For details, see the program code.

Algorithm ――
The implementation in this example depends on certain algorithms. Here we will introduce two main points:
1) when connecting the points of a polygon, we should note that the points must form a closed graph, which should ensure that the last point must overlap with the first point. The layout of other points requires a certain degree of space.
We first draw a rectangle and then determine other points based on the parallel relationship:
Rectangle (50, X, 70,220); // draw the main face;
Canvas. polygon ([point (50, x), point (70, X-10), point (90, X-10), point (70, x), point (50, X)]); // draw the top surface;
Canvas. polygon ([point (90, X-10), point (70, x), point (70,220), point (90,210), point (90, X-10)]); // draw the side;

2) determine the intersection of the specified angle edge and the circle on the circle
When drawing a pie chart in this example, we need to draw a slice according to a certain proportion, which requires determining the starting point and ending point of the slice. We set the starting point to a fixed point, and the ending point is set according to the actual situation,

-- Mathematical principles of pie charts ――

Assume that a ratio of K is known when drawing, the angle in the pie chart is θ = (k * 360), according to the relationship in the graph (the Y axis conforms to the screen coordinate system definition ), you can use the trigonometric function knowledge to obtain PX, Py:
Px = op * cos θ
Py = op * sin θ
The precondition for the formula above is that the O point is the origin point, and the op is the radius of the circle. If the O point is not the origin point, but a point (x0, y0) in the coordinate system, then the P point coordinate is
Px = x0 + OP * cos θ
Py = y0 + OP * sin θ

3. For the interface layout in this example, you can refer to the program running result diagram, which represents the items attribute settings of combox1 of the "brush type. The main code of this example is as follows:
Procedure tform1.button1click (Sender: tobject );
VaR
X, I, j: integer;
K: real;
Begin
Refresh;
// Indicate the "Y" axis;
Label4.left: = 25;
Label4.top: = 2;
Label4.caption: = 'y ';
Label4.transparent: = true;
// Indicate the "X" axis;
Label5.left: = 395;
Label5.top: = 227;
Label5.caption: = 'X ';
Label5.transparent: = true;
X: = 220-round (strtofloat (edit1.text)/strtofloat (edit2.text) * 200 );

With form1.canvas do
Begin
Pen. Width: = strtoint (edit3.text); // you can specify the width of the paint brush;
Case combobox1.items. indexof (combobox1.text) of // set the fill style of the brush;
0: brush. Style: = bssolid;
1: brush. Style: = bsclear;
2: brush. Style: = bshorizontal;
3: brush. Style: = bsvertical;
4: brush. Style: = bsfdiagonal;
5: brush. Style: = bsbdiagonal;
6: brush. Style: = bscross;
7: brush. Style: = bsdiagcross;
End;
// Draw the X axis;
MoveTo (2,220 );
Lineto (400,220 );
// Draw the Y axis;
MoveTo (20, 5 );
Lineto (20,230 );
// Draw the arrow direction of the Y axis as "yellow ";
MoveTo (20, 5 );
Lineto (15,12 );
MoveTo (20, 5 );
Lineto (25, 12 );
// Draw the arrow direction of the X axis as "yellow ";
MoveTo (400,220 );
Lineto (395,213 );
MoveTo (400,220 );
Lineto (395,227 );
If checkbox1.checked then // draw a three-dimensional histogram;
Begin
// Draw a rectangle on the front. The height of the rectangle can be dynamically defined based on the actual situation;
Rectangle (50, X, 70,220 );
// Draw the top surface and change with the height of the front rectangle;
Canvas. polygon ([point (50, x), point (70, X-10), point (90, X-10), point (70, x), point (50, X)]);
// Draw the side and change with the height of the front rectangle;
Canvas. polygon ([point (90, X-10), point (70, x), point (70,220), point (90,210), point (90, X-10)]);
End
Else
Rectangle (50, X, 70,220); // a straight column Chart drawn in a plane if it is not selected to be drawn in three-dimensional form;
// Draw a pie chart
K: = (strtofloat (edit1.text)/strtofloat (edit2.text) * 360; // converts the data to a ratio;
I: = round (250 + 100 * Cos (K * 3.14159/180 ));
J: = round (120 + 100 * sin (K * 3.14159/180 ));
Pie (350,220, 350,120, I, j );
Label3.caption: = 'ratio is '+ formatfloat (' ##. ##', (K/360) * 100) + '%'; // set the proportional function;
End;
End;
Procedure tform1.shape1mousedown (Sender: tobject; button: tmousebutton;
Shift: tshiftstate; X, Y: integer );
Begin
If colordialog1.execute then // set the background color of the window;
Shape1.brush. Color: = colordialog1.color;
Form1.color: = colordialog1.color;
End;

Procedure tform1.shape2mousedown (Sender: tobject; button: tmousebutton;
Shift: tshiftstate; X, Y: integer );
Begin
If colordialog2.execute then // set the paint brush color;
Shape2.brush. Color: = colordialog2.color;
Form1.canvas. Brush. Color: = colordialog2.color;
End;

Procedure tform1.shape3mousedown (Sender: tobject; button: tmousebutton;
Shift: tshiftstate; X, Y: integer );
Begin
If colordialog3.execute then // you can specify the paint brush color;
Shape3.brush. Color: = colordialog3.color;
Form1.canvas. Pen. Color: = colordialog3.color;
End;