Problem with placement of TImages
lazarus / 39-Graphics

----------------------------------------------------------------------
Tomi · 2022-03-27 14:12

Hello!

I would like draw a green and a blue rectangles on the Form side by
side and I would like increase and decrease these with the correct
ratio when the user resize the window.
But my code is totally wrong and I don't understand, why? Rectangles
are draw on incorrect coordinates and with black color and the program
often throws an error when resizing the window.
But here is my initial piece of code:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i unit
Unit1; {$mode objfpc}{$H+} interface uses  Classes, SysUtils, Forms,
Controls, Graphics, Dialogs, ExtCtrls; type   { TForm1 }   TForm1 =
class(TForm)    Kep3d: TImage;    Alaprajz: TImage;    procedure
FormCreate(Sender: TObject);    procedure FormResize(Sender:
TObject);  private   public   end; var  Form1:
TForm1; implementation {$R *.lfm} { TForm1 } procedure
TForm1.FormResize(Sender: TObject);begin  Kep3d.left:=Form1.left+8; 
Kep3d.top:=Form1.top+8; 
Kep3d.width:=Kep3d.width*round(Form1.width/Kep3d.width); 
Kep3d.height:=Kep3d.height*round(Form1.height/Kep3d.height); 
Kep3d.canvas.brush.color:=clGreen; 
Kep3d.canvas.brush.style:=bsSolid;  Kep3d.canvas.rectangle(Kep3d.left,
Kep3d.top,Kep3d.width,Kep3d.height); 
Alaprajz.left:=Kep3d.left+Kep3d.width+8;  Alaprajz.top:=Form1.top+8; 
Alaprajz.width:=Alaprajz.width*round(Form1.width/Alaprajz.width); 
Alaprajz.height:=Alaprajz.height*round(Form1.height/Alaprajz.height); 
Alaprajz.canvas.brush.color:=clBlue; 
Alaprajz.canvas.brush.style:=bsSolid;  Alaprajz.canvas.rectangle(Alapr
ajz.left,Alaprajz.top,Alaprajz.width,Alaprajz.height);end; procedure
TForm1.FormCreate(Sender: TObject);begin  Kep3d.left:=Form1.left+8; 
Kep3d.top:=Form1.top+8; 
Kep3d.width:=Kep3d.width*round(Form1.width/Kep3d.width); 
Kep3d.height:=Kep3d.height*round(Form1.height/Kep3d.height); 
Kep3d.canvas.brush.color:=clGreen; 
Kep3d.canvas.brush.style:=bsSolid;  Kep3d.canvas.rectangle(Kep3d.left,
Kep3d.top,Kep3d.width,Kep3d.height); 
Alaprajz.left:=Kep3d.left+Kep3d.width+8;  Alaprajz.top:=Form1.top+8; 
Alaprajz.width:=Alaprajz.width*round(Form1.width/Alaprajz.width); 
Alaprajz.height:=Alaprajz.height*round(Form1.height/Alaprajz.height); 
Alaprajz.canvas.brush.color:=clBlue; 
Alaprajz.canvas.brush.style:=bsSolid;  Alaprajz.canvas.rectangle(Alapr
ajz.left,Alaprajz.top,Alaprajz.width,Alaprajz.height);end; end.

----------------------------------------------------------------------
af0815 · 2022-03-27 15:36

Why not with Anchors ? And the redrawn of the Images in OnPaint of the
Images ?

The second, create two Bitmaps one green, one blue and combine this
with the images, so you must not redrawn anything.

----------------------------------------------------------------------
Tomi · 2022-03-27 15:59

Thanks, Andreas, I will try it.
I need two canvases in my program, because I would like draw two
different things same time. These two Images represent those canvases,
and I would like colorize them to make visible on main Form.

----------------------------------------------------------------------
wp · 2022-03-27 16:28

Just to paint two colored rectangles I would not use TImage, it's too
overloaded with features that you do not need here. A simple TPaintbox
is enough, or even the form's Canvas is sufficient.

Let me continue with two paintboxes. Align then to the left side of
the form by setting their Align = alLeft - this way they automatically
resize in height, when the form's height is changed.

Do not paint the rectangles in the OnCreate and OnResize event - this
is outside the normal painting cycle and leads to many "surprises".
Suppose the user drags another window over this form. Then the OS
needs to repaint the form but does not know how to draw the
rectangles. Always put user code for painting in the OnPaint event:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TForm1.PaintBox1Paint(Sender: TObject);var  pb: TPaintbox;begin  pb :=
Sender as TPaintbox;  pb.Canvas.Brush.Color := pb.Color; 
pb.Canvas.FillRect(0, 0, pb.Width, pb.Height);end;

----------------------------------------------------------------------
Tomi · 2022-03-28 08:02

Hello Wp and thank you for your answer!
I have changed my code, but something is still wrong, because the Form
doesn't show the two colorized rectangles.
Here is the code:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i unit
Unit1; {$mode objfpc}{$H+} interface uses  Classes, SysUtils, Forms,
Controls, Graphics, Dialogs, ExtCtrls; type   { TForm1 }   TForm1 =
class(TForm)    Kep3d: TPaintBox;    Alaprajz: TPaintBox;    procedure
FormCreate(Sender: TObject);    procedure FormResize(Sender:
TObject);  private   public   end; var  Form1:
TForm1; implementation {$R *.lfm} { TForm1 } procedure
TForm1.FormResize(Sender: TObject);begin  Kep3d.left:=Form1.left+8; 
Kep3d.top:=Form1.top+8; 
Kep3d.width:=Kep3d.width*round(Form1.width/Kep3d.width); 
Kep3d.height:=Kep3d.height*round(Form1.height/Kep3d.height);  // 
Alaprajz.left:=Kep3d.left+Kep3d.width+8;  Alaprajz.top:=Form1.top+8; 
Alaprajz.width:=Alaprajz.width*round(Form1.width/Alaprajz.width);  Ala
prajz.height:=Alaprajz.height*round(Form1.height/Alaprajz.height);end;
 procedure TForm1.FormCreate(Sender: TObject);begin 
Kep3d.canvas.brush.color:=clGreen; 
Kep3d.canvas.fillrect(Kep3d.left,Kep3d.top,Kep3d.width,Kep3d.height); 
Alaprajz.color:=clBlue;  //with Alaprajz do invalidate;end; end.I'm
totally confused with using of windows: I set one of these PaintBoxes
to Form1+8 screen coordinates, but it shows  that at 518.

----------------------------------------------------------------------
wp · 2022-03-28 08:47

You do not assign a handler for the OnPaint event to the paintboxes.
Without it they don't know how to paint themselves.

You do not use the Align property to glue the paintboxes to the left
of the form. you don't need OnResize if you do this.

Don't use the form instance variable (Form1) inside the code of the
class (TForm1) - your program will stop working if you'd rename the
instance or create another instance with a different name.

I don't understand the calculation of the paintbox widths in your
code. What do you want to achieve by it?

Here is the code of my example, now everything is set at runtime:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TForm1.FormCreate(Sender: TObject);begin  Kep3d.Align := alLeft; 
Kep3d.BorderSpacing.left := 8;  Kep3d.BorderSpacing.Top := 8; 
Kep3d.BorderSpacing.Right := 4;  Kep3d.BorderSpacing.Bottom := 8; 
Kep3d.Color := clGreen;  Kep3d.OnPaint := @Paintbox_Paint;   
Alaprajz.Align := alLeft;  Alaprajz.BorderSpacing.Left := 4; 
Alaprajz.BorderSpacing.Top := 8;  Alaprajz.BorderSpacing.Right := 8; 
Alaprajz.BorderSpacing.Bottom := 8;  Alaprajz.Color := clBlue; 
Alaprajz.OnPaint := @Paintbox_Paint;end; procedure
TForm1.Paintbox_Paint(Sender: TObject);var  paintbox: TPaintbox;begin 
paintbox := Sender as TPaintbox;  paintbox.Canvas.Brush.Color :=
paintbox.Color;  paintbox.Canvas.FillRect(0, 0, paintbox.Width,
paintbox.Height);end;

----------------------------------------------------------------------
Tomi · 2022-03-28 17:38

"I don't understand the calculation of the paintbox widths in your
code. What do you want to achieve by it?"

I would like increase or decrease correctly the size of paintboxes
when the user resize the program window. So, when the window became
bigger, paintboxes also became bigger keep the ratio, and similar when
the window became smaller, paintboxes also became smaller.
Unfortunately my calculation sometimes throws a runtime error.
I need two paintboxes: the user can drawing on the first paintbox, and
the program shows this draw on the second paintbox, with some
modifications.
Maybe two simple rectangles would be enough for this, but I think, it
is much better to use an Image or Paintbox. The most important for me
to make visible these areas with some background color.

----------------------------------------------------------------------
wp · 2022-03-28 20:07

Which fraction of the form will be covered by the paintboxes (images)?
If you want to fully cover the form by both paintboxes having equal
sizes you could activate the ChildSizing property of the form:
Drop the paintboxes on the form and add their OnPaint handler as
described in the previous messages. So not set any other properties.
Select the form and go to its ChildSizing propertySet ControlsPerLine
= 2Set EnlargeHorizontal and EnlargeVertical to
crsHomogeneousChildResizeSet Layout to
cclLeftToRightThenTopToBottomSet LeftRightSpacing and TopBottomSpacin
to 8 (or whatever you want as margin around the boxes)Set
HorizontalSpacing to 8 (or whatever distance you want to have between
them)Now each paintboxes always fills a half of the form.

If you need to have other controls on the form besides the paintboxes
put the paintboxes into a client-aligned panel and apply the
ChildSizing properties to the panel.

----------------------------------------------------------------------
Tomi · 2022-03-30 08:36

Interesting: the FormResize is executed when the program started. I
didn't know it and it caused malfunction to my program, because the
first PaintBox was bigger and overlie the other PaintBox.
Now, the sight of the program became much better, but I have to work
out the correct scaling method of PaintBoxes when the user resize the
window. But for this, I will try built in your concept, Wp.

----------------------------------------------------------------------
Tomi · 2022-04-01 08:42

PROBLEM SOLVED! 
I did it with some percentage calculations:

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TForm1.FormResize(Sender: TObject);var ablakxszazalek,ablakyszazalek:
real;begin  Kep3d.left:=8;  Kep3d.top:=8; 
//Kep3d.width:=regikep3dszel*round(Form1.width/regiform1szel); //These
2 lines are wrong! 
//Kep3d.height:=regikep3dmag*round(Form1.height/regiform1mag); 
ablakxszazalek:=(100*Form1.width)/regiform1szel; //Resizing PaintBoxes
with correct ratio  ablakyszazalek:=(100*Form1.height)/regiform1mag;
//windowypercent := (100*Form1.height)/oldform1height 
Kep3d.width:=round((regikep3dszel*ablakxszazalek)/100); 
Kep3d.height:=round((regikep3dmag*ablakyszazalek)/100);  // 
Alaprajz.left:=Kep3d.left+Kep3d.width+8;  Alaprajz.top:=Kep3d.top; 
Alaprajz.width:=Kep3d.width;  Alaprajz.height:=Kep3d.height;  // 
regiform1szel:=Form1.width;  regiform1mag:=Form1.height; 
regikep3dszel:=Kep3d.width;  regikep3dmag:=Kep3d.height;end; procedure
TForm1.FormCreate(Sender: TObject);begin  regiform1szel:=Form1.width;
//old form1 width  regiform1mag:=Form1.height; //old form1 height 
regikep3dszel:=Kep3d.width; //and similar with kep3d 
regikep3dmag:=Kep3d.height;end;