Problem with MouseDown event on a PaintBox
lazarus / 39-Graphics

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

Hello!

I found a big problem recently: I have two PaintBoxes on the main Form
and I would like allow to user to draw on it with the mouse.
But I realized that the real mouse coordintes are much bigger than the
coordinates of this second blue PaintBox so the MouseDown event never
executed when I press the left mouse button.
I don't know, how MouseDown perceives clicks? I thought, it happens
automatically - or not? Should I calculate the real coordinates and
tell this to MouseDown somehow?

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; 
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.Kep3dPaint(Sender: TObject);begin  Kep3d.color:=clGreen; 
Kep3d.canvas.fillrect(0,0,Kep3d.width,Kep3d.height);end; procedure
TForm1.FormCreate(Sender: TObject);begin  regiform1szel:=Form1.width; 
regiform1mag:=Form1.height;  regikep3dszel:=Kep3d.width; 
regikep3dmag:=Kep3d.height;  targy2ddb:=0;end; procedure
TForm1.AlaprajzPaint(Sender: TObject);var i: integer;  j:byte;begin 
Alaprajz.color:=clBlue; 
Alaprajz.canvas.fillrect(0,0,Alaprajz.width,Alaprajz.height); 
Alaprajz.canvas.pen.color:=clBlack;  Alaprajz.canvas.pen.width:=1; 
for i:=0 to targy2ddb-1 do  begin    for j:=0 to
a2dtargyak[i].pontjaidb-1 do    begin      Alaprajz.canvas.MoveTo(a2dt
argyak[i].pontjaitomb[j,0],a2dtargyak[i].pontjaitomb[j,2]);      if
j<a2dtargyak[i].pontjaidb-1 then        Alaprajz.canvas.LineTo(a2dtarg
yak[i].pontjaitomb[j+1,0],a2dtargyak[i].pontjaitomb[j+1,2])      else 
      Alaprajz.canvas.LineTo(a2dtargyak[i].pontjaitomb[0,0],a2dtargyak
[i].pontjaitomb[0,2]);    end;  end;end; procedure
TForm1.AlaprajzMouseDown(Sender: TObject; Button: TMouseButton; 
Shift: TShiftState; X, Y: Integer);begin  egy2dtargylerako('kocka');
//This function creates a draw  if (X>Alaprajz.left) and
(X<Alaprajz.left+Alaprajz.width) then
Alaprajz.canvas.textout(1,1,'KATT!!!');  //with Alaprajz.canvas do
invalidate;end;

----------------------------------------------------------------------
wp · 2022-04-01 11:10

X and Y in the mouse events are relative to the control which handles
them. Unfortunately I do not understand your variable names. But
assuming that "Alaprajz" is one of the paintboxes then you should not
consider Alaprajz.Left in the coordinated calculations because the
mouse coordinate X has its zero at the left side of the paintbox.

So instead of
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 if
(X>Alaprajz.left) and (X<Alaprajz.left+Alaprajz.width) then
Alaprajz.canvas.textout(1,1,'KATT!!!');do
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 if (X>0)
and (X<Alaprajz.width) then Alaprajz.canvas.textout(1,1,'KATT!!!');
Another issue is that you do not store the start and end points of the
lines to be drawn. They are determined by OnMouseDown and OnMouseUp
and used in the OnPaint event to draw the lines.

----------------------------------------------------------------------
Tomi · 2022-04-02 09:12

Thanks, Wp, it works! Now, I begin to understand the working of
coordiantes of different forms.
I just have to determine the exact place of the coordinates when the
user resize the PaintBox.

----------------------------------------------------------------------
Tomi · 2022-04-03 07:47

One more question: where should I put the Invalidate command when I
draw on PaintBox?
Just because when I put it on FormPaint or AlaprajzPaint, I can't
close the program with its close button and the screen are flickering.
Placed it elsewhere (e.g.: MouseDown) nothing happen. How can I solve
this problem?

----------------------------------------------------------------------
wp · 2022-04-03 10:21

You call Paintbox.Invalidate whenever you want the paintbox to be
updated, for example in the OnMouseDown, OnMouseMove and OnMouseUp
events of the paintbox. NEVER call it from the painting routine itself
because this creates an endless loop: While painting another paint
request is made, when this is handled yet another paint request is
made, etc...

Maybe the attached simple demo project helps you to understand how
this works. Simple press the left mouse button in the gray area (the
paintbox), hold it down and drag it around. You'll see a line between
the mouse-down position and the current position of the mouse. These
coordinates are stored, and the Paintbox.OnPaint draws this line
between them. Repainting (by Paintbox1.Invalidate) is requested in
Paintbox.OnMouseDown (activate the FDragging flag; store the
coordinates of the starting point; erase the old image),
Paintbox.MouseMove (if FDragging is set draw the line), and
Paintbox.OnMouseUp (reset the FDragging flag).

----------------------------------------------------------------------
Tomi · 2022-04-04 11:40

Ok, I understand that I should not put it in any painting event. But
something is still wrong with my program, although I just use
Invalidate at MouseDown - but where else?
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
AlaprajzMouseDown(Sender: TObject; Button: TMouseButton;      Shift:
TShiftState; X, Y: Integer);    procedure AlaprajzPaint(Sender:
TObject);    procedure FormCreate(Sender: TObject);    procedure
FormPaint(Sender: TObject);    procedure FormResize(Sender: TObject); 
  procedure Kep3dPaint(Sender: TObject);  private   public   end;  
type T2dtargyak = class(TObject)  private  public    pontjaitomb:
array [0..7,0..2] of integer;    pontjaidb: byte;    neve: string; 
end; var  Form1: TForm1; 
regiform1szel,regiform1mag,regikep3dszel,regikep3dmag: word; 
targy2ddb: integer;  a2dtargyak: array of
T2dtargyak; implementation {$R *.lfm} { TForm1 } procedure
egy2dtargylerako(nev: string; xh: integer; yh: integer);begin 
setlength(a2dtargyak,targy2ddb+1); 
a2dtargyak[targy2ddb]:=T2dtargyak.create; 
a2dtargyak[targy2ddb].neve:=nev;  case nev of  'kocka': begin //These
are the coordinates of the cube (kocka)     
 a2dtargyak[targy2ddb].pontjaidb:=8;     
 a2dtargyak[targy2ddb].pontjaitomb[0,0]:=xh; //1. point (bottom left
corner down)       a2dtargyak[targy2ddb].pontjaitomb[0,1]:=yh; //Y,
height now       a2dtargyak[targy2ddb].pontjaitomb[0,2]:=yh; //Z     
 a2dtargyak[targy2ddb].pontjaitomb[1,0]:=a2dtargyak[targy2ddb].pontjai
tomb[0,0]+14; //2. point (bottom right corner down)       a2dtargyak[t
argy2ddb].pontjaitomb[1,1]:=a2dtargyak[targy2ddb].pontjaitomb[0,1];  
   a2dtargyak[targy2ddb].pontjaitomb[1,2]:=a2dtargyak[targy2ddb].pontj
aitomb[0,2];       a2dtargyak[targy2ddb].pontjaitomb[2,0]:=a2dtargyak[
targy2ddb].pontjaitomb[0,0]+14; //4. point (upper right corner down) 
    a2dtargyak[targy2ddb].pontjaitomb[2,1]:=a2dtargyak[targy2ddb].pont
jaitomb[0,1];       a2dtargyak[targy2ddb].pontjaitomb[2,2]:=a2dtargyak
[targy2ddb].pontjaitomb[0,2]-14;       a2dtargyak[targy2ddb].pontjaito
mb[3,0]:=a2dtargyak[targy2ddb].pontjaitomb[0,0]; //3. point (upper
left corner down)       a2dtargyak[targy2ddb].pontjaitomb[3,1]:=a2dtar
gyak[targy2ddb].pontjaitomb[0,1];       a2dtargyak[targy2ddb].pontjait
omb[3,2]:=a2dtargyak[targy2ddb].pontjaitomb[0,2]-14;       a2dtargyak[
targy2ddb].pontjaitomb[4,0]:=a2dtargyak[targy2ddb].pontjaitomb[0,0];
//5. point (bottom left corner up)       a2dtargyak[targy2ddb].pontjai
tomb[4,1]:=a2dtargyak[targy2ddb].pontjaitomb[0,1]+14;       a2dtargyak
[targy2ddb].pontjaitomb[4,2]:=a2dtargyak[targy2ddb].pontjaitomb[0,2]; 
     a2dtargyak[targy2ddb].pontjaitomb[5,0]:=a2dtargyak[targy2ddb].pon
tjaitomb[0,0]+14; //6. point (bottom right corner up)       a2dtargyak
[targy2ddb].pontjaitomb[5,1]:=a2dtargyak[targy2ddb].pontjaitomb[0,1]+1
4;       a2dtargyak[targy2ddb].pontjaitomb[5,2]:=a2dtargyak[targy2ddb]
.pontjaitomb[0,2];       a2dtargyak[targy2ddb].pontjaitomb[6,0]:=a2dta
rgyak[targy2ddb].pontjaitomb[0,0]+14; //8. point (upper right corner
up)       a2dtargyak[targy2ddb].pontjaitomb[6,1]:=a2dtargyak[targy2ddb
].pontjaitomb[0,1]+14;       a2dtargyak[targy2ddb].pontjaitomb[6,2]:=a
2dtargyak[targy2ddb].pontjaitomb[0,2]-14;       a2dtargyak[targy2ddb].
pontjaitomb[7,0]:=a2dtargyak[targy2ddb].pontjaitomb[0,0]; //7. point
(upper left corner up)       a2dtargyak[targy2ddb].pontjaitomb[7,1]:=a
2dtargyak[targy2ddb].pontjaitomb[0,1]+14;       a2dtargyak[targy2ddb].
pontjaitomb[7,2]:=a2dtargyak[targy2ddb].pontjaitomb[0,2]-14;    end; 
end;  inc(targy2ddb,1);end; procedure TForm1.FormResize(Sender:
TObject);var ablakxszazalek,ablakyszazalek: real;  i: integer;  j:
byte;begin  Kep3d.left:=8;  Kep3d.top:=8; 
//Kep3d.width:=regikep3dszel*round(Form1.width/regiform1szel); 
//Kep3d.height:=regikep3dmag*round(Form1.height/regiform1mag); 
ablakxszazalek:=(100*Form1.width)/regiform1szel; 
ablakyszazalek:=(100*Form1.height)/regiform1mag; 
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;  //  for i:=0
to targy2ddb-1 do  begin //Recalculating the coordinates of 2D object
when resizing window:    for j:=0 to a2dtargyak[i].pontjaidb-1 do   
begin      a2dtargyak[i].pontjaitomb[j,0]:=round((a2dtargyak[i].pontja
itomb[j,0]*ablakxszazalek)/100);      a2dtargyak[i].pontjaitomb[j,1]:=
round((a2dtargyak[i].pontjaitomb[j,1]*ablakyszazalek)/100);      a2dta
rgyak[i].pontjaitomb[j,2]:=round((a2dtargyak[i].pontjaitomb[j,2]*ablak
yszazalek)/100);    end;  end;end; procedure TForm1.Kep3dPaint(Sender:
TObject);begin  Kep3d.color:=clGreen; 
Kep3d.canvas.fillrect(0,0,Kep3d.width,Kep3d.height);//This PaintBox
will draw the 3D cube later.end; procedure TForm1.FormCreate(Sender:
TObject);begin  regiform1szel:=Form1.width; //Old Form1 width 
regiform1mag:=Form1.height; //and height. 
regikep3dszel:=Kep3d.width;  regikep3dmag:=Kep3d.height; 
targy2ddb:=0;end; procedure TForm1.AlaprajzPaint(Sender: TObject);var
i: integer;  j:byte;begin  Alaprajz.color:=clBlue; 
Alaprajz.canvas.fillrect(0,0,Alaprajz.width,Alaprajz.height); 
Alaprajz.canvas.pen.color:=clBlack;  Alaprajz.canvas.pen.width:=2; 
for i:=0 to targy2ddb-1 do  begin    for j:=0 to
a2dtargyak[i].pontjaidb-1 do    begin      if
j<a2dtargyak[i].pontjaidb-1 then        canvas.Line(Alaprajz.left+a2dt
argyak[i].pontjaitomb[j,0],Alaprajz.top+a2dtargyak[i].pontjaitomb[j,2]
,Alaprajz.left+a2dtargyak[i].pontjaitomb[j+1,0],Alaprajz.top+a2dtargya
k[i].pontjaitomb[j+1,2])      else        canvas.Line(Alaprajz.left+a2
dtargyak[i].pontjaitomb[j,0],Alaprajz.top+a2dtargyak[i].pontjaitomb[j,
2],Alaprajz.left+a2dtargyak[i].pontjaitomb[0,0],Alaprajz.top+a2dtargya
k[i].pontjaitomb[0,2]);    end;  end;end; procedure
TForm1.AlaprajzMouseDown(Sender: TObject; Button: TMouseButton; 
Shift: TShiftState; X, Y: Integer);begin  if (X>0) and
(X<Alaprajz.width) and (Y>0) and (Y<Alaprajz.height) then  begin   
egy2dtargylerako('kocka',X,Y); //Here we place a 2D rectangle:   
Alaprajz.invalidate;  end;end; procedure TForm1.FormPaint(Sender:
TObject);var pt: Tpoint;begin  pt:=ScreenToClient(mouse.cursorpos);  c
anvas.textout(1,Form1.height-20,inttostr(Form1.width)+'-
'+inttostr(Alaprajz.left)+'-'+inttostr(mouse.cursorpos.X)+'-
'+inttostr(pt.X)+'-'+inttostr(targy2ddb));end; end.

----------------------------------------------------------------------
wp · 2022-04-04 14:51

I tried to construct a compilable project from this, and it did not
work - maybe because of your bug, or because I did something wrong
when copying the code. Please understand: you must post compilable
code along with non-trivial questions. I simply do not understand what
is going on, just from reading the code, in particular if I don't
understand the identifiers.

So, please pack the .pas, .lfm, .lpi and .lpr files to a common zip
(no compiler-created files please), and upload them via "Attachment
and other options". And you would help me if you'd translate your
identifiers to English.

----------------------------------------------------------------------
Tomi · 2022-04-05 12:59

Okay, here is my compressed program (except project1.exe). The main
problem is that I don't know which event is the suitable for
Invalidate command to make visible the drawing on PaintBox named
"Alaprajz" (blue rectangle).
If you put Invalidate in Form1.Paint, you will see the black
rectangles after clicking on Alaprajz, but it is not the good
solution.

----------------------------------------------------------------------
wp · 2022-04-05 14:26

Thank you for not translating the identifiers. I am as stupid as
before. I have no idea what this means, what this should do, what I
should do. Would you understand this program? Sorry, I cannot help
you.

----------------------------------------------------------------------
Tomi · 2022-04-06 08:29

Sorry, Wp, here is the completely rewritted program to english
variable names.
The question is where should I put the Invalidate command to make
visible drawings? Because when you click on the blue rectangle,
nothing happen. To be more precisely, everything OK, but you cannot
see the little black rectangles on the blue PaintBox.

----------------------------------------------------------------------
wp · 2022-04-06 10:08

Thank you. But I guess that you did not even try to test whether the
translated program compiles, right? There are still some of the old
identifiers which are now unknown, of course. I created a new project
by combining the old and new versions - I hope that it is correct.

Now let me analyze your code:

You click in the blue rectangle (the FloorPlan):
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.FloormapMouseDown(Sender: TObject; Button: TMouseButton; 
Shift: TShiftState; X, Y: Integer);begin  if (X>0) and
(X<Floormap.width) and (Y>0) and (Y<Floormap.height) then  begin   
createa2dobj('cube',X,Y);    Floormap.invalidate;  end;end; You create
some object (a cube) and request the Floorplan paintbox to redraw it
self next time when the OS is ready for it. This is correct.

Now let's look at the code in the OnPaint handler of the Floorplan:
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.FloorplanPaint(Sender: TObject);var i: integer;  j:byte;begin 
Floormap.color:=clBlue; 
Floormap.canvas.fillrect(0,0,Floormap.width,Floormap.height); 
Floormap.canvas.pen.color:=clBlack;  Floormap.canvas.pen.width:=2; 
for i:=0 to numof2dobj-1 do  begin    for j:=0 to
a2dobject[i].numofitspoints-1 do    begin      if
j<a2dobject[i].numofitspoints-1 then        canvas.Line(Floormap.left+
a2dobject[i].itspointsarray[j,0],Floormap.top+a2dobject[i].itspointsar
ray[j,2],Floormap.left+a2dobject[i].itspointsarray[j+1,0],Floormap.top
+a2dobject[i].itspointsarray[j+1,2])      else        canvas.Line(Floo
rmap.left+a2dobject[i].itspointsarray[j,0],Floormap.top+a2dobject[i].i
tspointsarray[j,2],Floormap.left+a2dobject[i].itspointsarray[0,0],Floo
rmap.top+a2dobject[i].itspointsarray[0,2]);    end;  end;end;There are
two issues
You draw lines by calling canvas.Line(...). Since the "canvas" is not
specified any further it refers to the canvas of the form, rather than
that of the paintbox. This means that you are painting on the form,
but this is covered by the paintboxes, at least partly! Put a
"Floorplan." in front of it and it will paint on the paintbox:
Floorplan.Canvas.line(...)The second issue refers to the coordinates.
In the TPaintbox.OnPaint event, the paintbox draws itself, and it does
this assuming that all coordinates are relative to itself, i.e. the
origin of the coordinate system, in the top/left corner, has the
coordinates (x=0, y=0). In your code, however, you add Floorplan.Left
and Floorplan.Top to the x/y coordinates of the cube - this offsets
the cube by the top/left position of the paintbox, and since the blue
paintbox is located quite far at the right, the cube is moved out of
the paintbox. Solution: Simply remove Floorplan.Left and
Floorplan.Top.

Here is the fixed event handler: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.FloormapPaint(Sender: TObject);var i: integer;  j:byte;begin 
Floormap.color:=clBlue; 
Floormap.canvas.fillrect(0,0,Floormap.width,Floormap.height); 
Floormap.canvas.pen.color:=clBlack;  Floormap.canvas.pen.width:=2; 
for i:=0 to numof2dobj-1 do  begin    for j:=0 to
a2dobject[i].numofitspoints-1 do    begin      if
j<a2dobject[i].numofitspoints-1 then        Floormap.canvas.Line(a2dob
ject[i].itspointsarray[j,0],a2dobject[i].itspointsarray[j,2],
a2dobject[i].itspointsarray[j+1,0],
a2dobject[i].itspointsarray[j+1,2])      else        Floormap.canvas.L
ine(a2dobject[i].itspointsarray[j,0],a2dobject[i].itspointsarray[j,2],
a2dobject[i].itspointsarray[0,0], a2dobject[i].itspointsarray[0,2]); 
 end;  end;end;

----------------------------------------------------------------------
Tomi · 2022-04-06 12:51

Oh, big thanks for you, Wp! I rewrote my code on the basis of your
advices and it works!
Otherwise, today I tried put this piece of code in my program, but it
worked only at clicking in TForm1.AlaprajzMouseDown, but not with
TForm1.FormResize, placed at the end of tht procedure:
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.FloormapMouseDown(Sender: TObject; Button: TMouseButton; 
Shift: TShiftState; X, Y: Integer);begin  if (X>0) and
(X<Floormap.width) and (Y>0) and (Y<Floormap.height) then  begin   
createa2dobj('cube',X,Y);    FloormapPaint(Sender); //<- This is the
additional code  end;end;Finally, your code is the best solution.