Difference between revisions of "Drawing with canvas"

From Lazarus wiki
Jump to navigationJump to search
(New page: '''Line''' (x1, y1, x2, y2)-> draw a line from point (x1, y1) to (x2, y2) '''Rectangle''' (x1, y1, x2, y2)-> draw a rectangle with a vertex at the point (x1, y1) and the opposite at the p...)
 
m (Correct canvas image)
 
(17 intermediate revisions by 10 users not shown)
Line 1: Line 1:
−
'''Line''' (x1, y1, x2, y2)-> draw a line from point (x1, y1) to (x2, y2)
+
{{Drawing with canvas}}
  
−
'''Rectangle''' (x1, y1, x2, y2)-> draw a rectangle with a vertex at the point (x1, y1) and the opposite at the point (x2, y2)
+
'''Drawing with canvas''' can be done using several procedures e.g.
 +
* [[Canvas line]], draws a line from coordinates (x1,y1) to (x2,y2)
 +
* [[Canvas rectangle]], draws a rectangle from upper left (x1,y1) to lower right (x2,y2)
 +
* [[Canvas ellipse]], draws an ellipse in a rectangle defined by (x1,y1) and (x2,y2). If x2-x1 = y2-y1, the ellipse will be a circle with radius (x2-x1)/2.
  
−
'''Ellipse''' (x1, y1, x2, y2)-> draws an ellipse in the rectangle defined by the point (x1, y1) and point (x2, y2)
+
In the Canvas object the <code>Brush</code> and <code>Pen</code> objects are defined, both with a <code>Color</code> property, which indicate the color that makes the fill and stroke of the various objects that are drawn. To paint an object of one color, the first thing is to change the brush and color, before giving the instruction to draw, the order of the statements is important. This would be the code, notice how the color is changed before drawing the ellipse:
  
−
[[Image:canvas2.png]]
+
<syntaxhighlight lang=pascal>
 +
  Canvas.Brush.Color:= clRed;
 +
  Canvas.Ellipse(195, 117, 205, 128);
 +
  Canvas.Brush.Color:= clBlue;
 +
  Canvas.Rectangle (192, 130,208,160);
 +
  Canvas.Brush.Color:= clGreen;
 +
  Canvas.Rectangle (187, 130,191,162);
 +
  Canvas.Brush.Color:= clYellow;
 +
  Canvas.Rectangle (209, 130,213,162);
 +
  Canvas.Brush.Color:= clMaroon;
 +
  Canvas.Rectangle (193,161,199,200);
 +
  Canvas.Brush.Color:= clPurple;
 +
  Canvas.Rectangle (201,161,207,200);
 +
</syntaxhighlight>
  
−
For example, the following code draws the diagonals. Enter the code between the begin and the end of the function Button1Click:
+
or shorter:
  
−
<delphi>
+
<syntaxhighlight lang=pascal>
−
procedure TForm1.Button1Click(Sender: TObject);
+
  with Canvas do begin
−
begin
+
    Brush.Color:= clRed;
−
  canvas.Line(0,0, form1.Width,form1.Height);
+
    Ellipse(195, 117, 205, 128);
−
  canvas.Line(0,form1.height,form1.width,0);
+
    Brush.Color:= clBlue;
−
end;  
+
    Rectangle (192, 130,208,160);
−
</delphi>
+
    Brush.Color:= clGreen;
 +
    Rectangle (187, 130,191,162);
 +
    Brush.Color:= clYellow;
 +
    Rectangle (209, 130,213,162);
 +
    Brush.Color:= clMaroon;
 +
    Rectangle (193,161,199,200);
 +
    Brush.Color:= clPurple;
 +
    Rectangle (201,161,207,200);
 +
  end;
 +
</syntaxhighlight>
  
−
How can you paint the inside of the rectangles and ellipses?
+
This will give something like this:  
−
There in the Canvas object, an object called '''Brush''' and a '''Pen''', both with a color property, which indicate the color that makes the fill and stroke of the various objects that are drawn.
+
[[Image:canvas.png]]
−
To paint an object of one color, the first thing is to change the brush and brush, before giving the instruction to draw ... the order is important. This would be our code, notice how the color is changed first and then given the instruction to draw:
 
−
 
 
−
<delphi>
 
−
  canvas.Brush.color:= clred;
 
−
  canvas.Ellipse(195, 117, 205, 128);
 
−
  canvas.Brush.color:= clblue;
 
−
  canvas.Rectangle (192, 130,208,160);
 
−
  canvas.Brush.color:= clgreen;
 
−
  Canvas.Rectangle (187, 130,191,162);
 
−
  canvas.Brush.color:= clyellow;
 
−
  Canvas.Rectangle (209, 130,213,162);
 
−
  canvas.Brush.color:= clmaroon;
 
−
  Canvas.Rectangle (193,161,199,200);
 
−
  canvas.Brush.color:= clpurple;
 
−
  Canvas.Rectangle (201,161,207,200);
 
−
</delphi>
 
−
 
 
−
If you follow the steps, you may have done something like this:[[Image:canvas3.png]]
 
−
 
 
−
 
 
−
[[Contents|Contents]]
 

Latest revision as of 23:35, 27 February 2021

│ Deutsch (de) │ English (en) │ français (fr) │ 中文（中国大陆）‎ (zh_CN) │

Drawing with canvas can be done using several procedures e.g.

  • Canvas line, draws a line from coordinates (x1,y1) to (x2,y2)
  • Canvas rectangle, draws a rectangle from upper left (x1,y1) to lower right (x2,y2)
  • Canvas ellipse, draws an ellipse in a rectangle defined by (x1,y1) and (x2,y2). If x2-x1 = y2-y1, the ellipse will be a circle with radius (x2-x1)/2.

In the Canvas object the Brush and Pen objects are defined, both with a Color property, which indicate the color that makes the fill and stroke of the various objects that are drawn. To paint an object of one color, the first thing is to change the brush and color, before giving the instruction to draw, the order of the statements is important. This would be the code, notice how the color is changed before drawing the ellipse: 

  Canvas.Brush.Color:= clRed;
  Canvas.Ellipse(195, 117, 205, 128);
  Canvas.Brush.Color:= clBlue;
  Canvas.Rectangle (192, 130,208,160);
  Canvas.Brush.Color:= clGreen;
  Canvas.Rectangle (187, 130,191,162);
  Canvas.Brush.Color:= clYellow;
  Canvas.Rectangle (209, 130,213,162);
  Canvas.Brush.Color:= clMaroon;
  Canvas.Rectangle (193,161,199,200);
  Canvas.Brush.Color:= clPurple;
  Canvas.Rectangle (201,161,207,200);

or shorter: 

  with Canvas do begin
    Brush.Color:= clRed;
    Ellipse(195, 117, 205, 128);
    Brush.Color:= clBlue;
    Rectangle (192, 130,208,160);
    Brush.Color:= clGreen;
    Rectangle (187, 130,191,162);
    Brush.Color:= clYellow;
    Rectangle (209, 130,213,162);
    Brush.Color:= clMaroon;
    Rectangle (193,161,199,200);
    Brush.Color:= clPurple;
    Rectangle (201,161,207,200);
  end;

This will give something like this: canvas.png

Retrieved from "http://wiki.freepascal.org/index.php?title=Drawing_with_canvas&oldid=143684"