Canvas class in Delphi)

Source: Internet
Author: User
Tags polyline textout

DELPHI provides programmers with a flexible place for drawing.
CANVAS class. Many controls in DELPHI have this attribute, so that programmers can
You can plot the surface of these controls as needed, which improves the user interface or
Some screen effects play an extraordinary role. The following examples illustrate several special screens.
Effect Formation Process.

I. Basic CANVAS knowledge:

1. controls with CANVAS attributes:
TBitmap, TComboBox, TDBComboBox, TDBGrid, TDBListBox, TDirectoryListBox,
TDrawGrid, TFileListBox, TForm, THeaderControl, TImage, TListBox, TOutline,
TPaintBox, TPrinter, TStatusBar, TStringGrid, etc,

2. CANVAS attributes and commands: space limitations, omitted parameters and format descriptions. For details, refer to the subsequent programs and DELPHI help files:

Canvas. rectangle (): draws a rectangular pen. color: defines the paint color.
Roundrect (): Draw a rounded rectangle pen. width: Define the width of the paint brush
Arc (): draws an arc (not filled) brush. color: defines the fill color
Chord (): draw an arc (fill) textout (): Output A string at a fixed position
Pie: Draw a slice textwidth: Take the string height
Polygon (): Draw a polygon fill textheight: Take the string width
Polyline (): multi-point connections (not filled) font. color: Specifies the font color
Pixels (): Specifies the fixed pixel color value font. size: Specifies the font size.
Moveto (): Specifies the starting point of the draw line Ellipse (): circle or elliptical
Lineto (): Specifies the end point of the draw line.


3. CANVAS considerations: when the window is re-painted, the image on the CANVAS will disappear.
For example, when the window is minimized and restored, it will cause the canvas Image
In addition, when the program is just running, the window is also re-drawn, so
If you draw a picture on the canvas before the drawing window, the image cannot be displayed in the pop-up window.
For example, in the TForm1.FormCreate () event
In vain, but canvas operations can be prepared in this event, such as setting
The color and width of the paint brush.

Ii. Example of CANCAS application:

1. Add a shadow or projection effect to the control. The basic principle is to use the control's parent
Controls such as FORM or CANVAS of other container controls
Add images in proper places and properly match the lines and colors to make the controls and the surrounding
Images are integrated to form special visual effects.
Controls such as TOP, LEFT, WIDTH, and HEIGHT.
Coordinates of vertices and endpoints,
Can ensure the perfect Implementation of the projection and shadow effects; for example, you can create three in the window.
And add the following code to the click events of Buttons 2 and 3.
Then press button 2 or button 3, even if button 1 forms a projection and shadow effect:


Procedure tform1.button2click (Sender: tobject );
VaR
X, Y, I: integer;
Begin
X: = 0; Y: = 0;
Form1.canvas. Pen. Width: = 1;
Fori: = 0to8do
Begin
Form1.canvas. Pen. Color: = $00a0a0a0;
Form1.canvas. moveTo (button1.left + button1.width + X,
Button1.top + y );
Form1.canvas. lineto (button1.left + button1.width + X,
Button1.top + button1.height + y );
Form1.canvas. pen. color: = $00606060;
Form1.canvas. moveto (Button1.left + x,
Button1.top + Button1.height + y );
Form1.canvas. lineto (Button1.left + Button1.width + x,
Button1.top + button1.height + y );
X: = x + 1;
Y: = y + 1;
End;
End;

Procedure TForm1.Button3Click (Sender: TObject );
Var

X, Y, I: integer;
Begin
X: = 0; Y: = 0;
Form1.canvas. Pen. Width: = 1;
Fori: = 0to8do
Begin
Form1.canvas. Pen. Color: = $00404040;
Form1.canvas. moveTo (button1.left + button1.width + X,
Button1.top + 8 );
Form1.canvas. lineto (button1.left + button1.width + X,
Button1.top + button1.height + 8 );
Form1.canvas. moveTo (button1.left + 8,
Button1.top + button1.height + y );
Form1.canvas. lineto (button1.left + button1.width + 8,
Button1.top + button1.height + y );
X: = x + 1;
Y: = y + 1;
End;
End;


2. Add Borders to controls: There are many controls in DELPHI that do not have border attributes.
You can add borders for any controls to make their outlines clear.
Defines the color and width of the paint brush (Border width), and then uses polyline ()
To automatically locate the four-corner coordinates based on the position and size of the corresponding control, one operation can be completed at a time.
Draws a rectangle with a fixed width.
You can define the color of the paint brush multiple times to draw multiple consecutive rectangles.
The color of adjacent rectangles to draw borders with special effects. For example
And add the following code in the MOUSEMOVE event.
When you move the mouse over the corresponding button, the corresponding button will show a special color edge
When the mouse moves to the blank area of the window, the window will display an obvious edge
Special prompts;


Procedure TForm1.Button1MouseMove
(Sender: TObject; Shift: TShiftState; X, Y: Integer );
Begin
Form1.repaint;
Form1.Canvas. pen. color: = clGreen;
Form1.Canvas. pen. width: = 5;
Form1.Canvas. polyline ([point (Button1.left, Button1.top ),
Point (Button1.left + Button1.width, Button1.top ),
Point (Button1.left + Button1.width, Button1.top + Button1.hei
Ght ),
Point (Button1.left, Button1.top + Button1.height ),
Point (button1.left, button1.top)]);
End;

Procedure tform1.button2mousemove
(Sender: tobject; shift: tshiftstate; X,
Y: integer );
Begin
Form1.repaint;
Form1.canvas. Pen. Color: = clblue;
Form1.canvas. Pen. Width: = 5;
Form1.canvas. polyline ([point (button2.left, button2.top ),
Point (button2.left + button2.width, button2.top ),
Point (button2.left + button2.width, button2.top + button2.hei
Ght ),
Point (Button2.left, Button2.top + Button2.height ),
Point (Button2.left, Button2.top)]);
End;

Procedure TForm1.FormMouseMove
(Sender: TObject; Shift: TShiftState; X,
Y: Integer );
Begin
Form1.repaint;
Form1.Canvas. pen. color: = clRed;
Form1.Canvas. pen. width: = 3;
Form1.Canvas. polyline ([point (0, 0), point (form1.width-
10, 0), & nbsp;
Point (form1.width-10, form1.height-30 ),
Point (0, form1.height-30), point (0, 0)]);
End;



3. Install the dynamic help function for graphical buttons or other controls.
String display function, that is, when you move the mouse over a specified control
The corresponding string is displayed. When the mouse leaves, the character is overwritten by the image.
The string disappears. You can also use a simple command to complete form1.repaint.
The function is to re-draw all the controls in FORM1, so that you can quickly clear
Originally displayed characters; during programming, the MouseMove () Events of various controls are mainly used;
For example, you can place two buttons in the window and arrange the following code.
When you move to the corresponding button, the corresponding prompt information is displayed above it.
"OK" is displayed in the lower left corner of the window;


Procedure TForm1.Button1MouseMove
(Sender: TObject; Shift: TShiftState; X, Y: Integer );
Begin
Form1.repaint;
Form1.Canvas. brush. color: = clGreen;
Form1.Canvas. font. size: = 8;
Form1.Canvas. font. color: = $1200 ffff;
Form1.Canvas. TextOut (Button1.left,
Button1.top-15, 'openfile ');
End;

Procedure TForm1.Button2MouseMove
(Sender: TObject; Shift: TShiftState; X, Y: Integer );
Begin
Form1.repaint;
Form1.Canvas. font. size: = 8;
Form1.Canvas. brush. color: = clRed;
Form1.Canvas. font. color: = $1200 ffff;
Form1.Canvas. TextOut (Button2.left, Button2.top-
15, 'exit ');
End;

Procedure TForm1.FormMouseMove
(Sender: TObject; Shift: TShiftState; X,
Y: Integer );
Begin
Form1.repaint;
Form1.Canvas. font. size: = 12;
Form1.Canvas. brush. color: = clBlue;
Form1.Canvas. font. color: = $00 ffffff;
Form1.Canvas. TextOut (0, form1.height-50, 'OK ');
End;



4. The basic method for making mobile subtitles on a TV is as follows:
First select a control that can be used as a canvas, such as FORM or IMAGE, and then use
Fill color to fill the entire canvas and display a special foreground color at a fixed position on the canvas
A fixed-size string that regularly changes the display string in the TIMER control
Because the character string at the original position cannot disappear automatically, you need to fill the face
Lines of the same color can overwrite the remaining parts to achieve smooth subtitle movement.
Effect: You can define Bitmap and Rect variables in advance,
Create Bitmap and Rect objects during the program running stage, and load
Fixed image files, while loading the object Bitmap into the Rect object to implement the image
Display, and then regularly change the Rect coordinate value in the Timer control, and
Fill the lines with the same color to overwrite the remaining image to ensure image stability.
The string or image Movement Operation implemented using the above method has a stable effect,
No blinking or jitter, excellent visual effects, and no prior control required
Program, fully implemented by the program code, has a considerable number of advantages; programming example: in the window
TIMER1, IMAGE1, and TRECT and TBITMAP
And arrange the following code in the FormCreate and Timer1Timer events,
After the program is run, the mobile subtitles and image effects in the image box appear.
Results, and disappears from the top, and then appears again from the bottom;


Var {definition variable}
Form1: TForm1;
X, tt, l, h: integer;
Pic: Trect;
Map: Tbitmap;
{Animation demo code}
Procedure TForm1.Timer1Timer (Sender: TObject );
Begin
X: = X-1;
TT: = TT-1;
Ifx <-160 then
X: = image1.height + 20;
TT: = x + 80;
Image1.canvas. Font. Size: = 18;
Image1.canvas. Font. Color: = $1200 FFFF;
Image1.canvas. textout (10, X, 'OK subtitle movement demo ');
Image1.canvas. Font. Size: = 12;
Image1.canvas. Font. Color: = $ 120000ff;
Image1.canvas. textout (20, x + 50, 'font color effect demo ');
L: = image1.canvas. textwidth ('font color effect demo ');
H: = image1.canvas. textheight ('font color effect demo ');
Image1.canvas. Pen. Color: = clgreen;
Image1.canvas. moveTo (20, H + x + 50-2 );
Image1.canvas. lineto (20 + L, H + x + 50-2 );
PIC. topleft. X: = 30;
PIC. topleft. Y: = tt;
PIC. bottomright. X: = pic. topleft. x + 100;
Pic. bottomright. y: = pic. topleft. y + 80;
Image1.canvas. stretchdraw (pic, map );
Image1.Canvas. pen. color: = clGreen;
Image1.Canvas. moveto (0, pic. topleft. y + 80 );
Image1.Canvas. lineto (pic. topleft. x + 100, pic. topleft. y + 80)
;
End;
{Set initial animation values below}
Procedure TForm1.FormCreate (Sender: TObject );
Begin
Timer1.enabled: = true;
Timer1.Interval: = 10;
X: = image1.height + 20;
Tt: = x + 80;
Form1.repaint;
Image1.Canvas. brush. color: = clGreen;
Pic: = Rect (0, 0, image1.width, image1.height );
Image1.Canvas. FillRect (pic );
Pic: = Rect (-1,-1, 1 );
Map: = Tbitmap. create;
Map. loadfromfile ('d: \ windows \ 256color.bmp ');
Image1.canvas. stretchdraw (pic, map );
End;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.