Points on image drawn on another image not lining up.

[Coxy]

Hi,

I'm drawing an image, with a point highlighted, on an outer image using Canvas2D. If I draw the highlighted point on the outer image they don't line up. I can get them to line up if I use an offset of -0.75 pixels. Why are the coordinate systems of drawn image and outer image not aligned?

See example output for various offsets below.

Example Code

Code: Pascal  [Select][+][-]

1. unit Unit1;
2.  
3. {$mode objfpc}{$H+}
4.  
5. interface
6.  
7. uses
8.   Classes, SysUtils, Forms, Controls, Graphics, Dialogs, StdCtrls, BGRABitmap,
9.   BGRABitmapTypes;
10.  
11. type
12.  
13.   { TForm1 }
14.  
15.   TForm1 = class(TForm)
16.     procedure FormPaint(Sender: TObject);
17.   private
18.  
19.   public
20.  
21.   end;
22.  
23. var
24.   Form1: TForm1;
25.  
26. implementation
27.  
28. {$R *.lfm}
29.  
30. { TForm1 }
31.  
32. procedure TForm1.FormPaint(Sender: TObject);
33. const
34.   BoxSize = 4;
35. var
36.   Screen, Img : TBGRABitmap;
37.   X,Y, RX, RY, Offset : single;
38.   W, H : integer;
39.   info : string;
40. begin
41.   W := 120;
42.   H := 75;
43.  
44.   X := 100;
45.   Y := 75;
46.  
47.   RX := 90;
48.   RY := 65;
49.  
50.   Screen := TBGRABitmap.Create(1920,1080,BGRAWhite);
51.   Img := TBGRABitmap.Create(w,h);
52.  
53.   Img.Fill(BGRA(200,200,40));
54.  
55.   // Draw point
56.   Img.Canvas2D.fillStyle(BGRABlack);
57.   Img.Canvas2D.fillRect(RX-BoxSize,RY-BoxSize,BoxSize*2,BoxSize*2);
58.  
59.   // Draw image on screen
60.   Offset:=-0.75;                                                                          // <<<-------- Set desired offset
61.   info := 'Offset='+FloatToStr(Offset);
62.   Screen.Canvas2D.drawImage(Img,X+Offset,Y+Offset);
63.  
64.   // Draw point on screen
65.   Screen.Canvas2D.fillStyle(BGRA(240,0,240));
66.   Screen.Canvas2D.fillRect(X+RX-BoxSize,Y+RY-BoxSize,BoxSize*2,BoxSize*2);
67.  
68.  
69.   Screen.TextOut(100,50,info,BGRABlack);
70.   Screen.Draw(Canvas,0,0);
71.  
72.   Screen.SaveToFile('x:\Temp\image '+FloatToStr(Offset)+'.png');
73.  
74.   Img.Free;
75.   Screen.Free;
76. end;
77.  
78. end.
79.  

I've tried various settings of pixelCenteredCoordinates, for drawn and outer image, having no effect as Canvas2D.drawImage does not use Canvas2D.FCanvasOffset but has a hard coded offset of PointF(0.5,0.5).


Lazarus:  2.0.10
FPC: 3.2.0
OS: Windows 10 Pro

[Coxy]

Hi,

Here's another example, using lines, that better highlights the problem.

When running this code does anyone else experience this issue.

Code: Pascal  [Select][+][-]

1. unit Unit1;
2.  
3. {$mode objfpc}{$H+}
4.  
5. interface
6.  
7. uses
8.   Classes, SysUtils, Forms, Controls, Graphics, Dialogs, StdCtrls, BGRABitmap,
9.   BGRABitmapTypes;
10.  
11. type
12.  
13.   { TForm1 }
14.  
15.   TForm1 = class(TForm)
16.     procedure FormPaint(Sender: TObject);
17.   private
18.  
19.   public
20.  
21.   end;
22.  
23. var
24.   Form1: TForm1;
25.  
26. implementation
27.  
28. {$R *.lfm}
29.  
30. { TForm1 }
31.  
32. procedure TForm1.FormPaint(Sender: TObject);
33. var
34.   Screen, Img : TBGRABitmap;
35.   X,Y, RX, RY, Offset, LineWidth : single;
36.   W, H : integer;
37.   info : string;
38. begin
39.   W := 120;
40.   H := 75;
41.  
42.   X := 100;
43.   Y := 75;
44.  
45.   RX := 90;
46.   RY := 65;
47.  
48.   LineWidth:=4.0;
49.  
50.   Screen := TBGRABitmap.Create(1920,1080,BGRAWhite);
51.   Img := TBGRABitmap.Create(w,h);
52.  
53.   Img.Fill(BGRA(200,200,40));
54.  
55.   // Draw Lines On Img
56.   Img.Canvas2D.strokeStyle(BGRABlack);
57.   Img.Canvas2D.lineWidth:=LineWidth;
58.   Img.Canvas2D.beginPath;
59.   Img.Canvas2D.moveTo(0,RY);
60.   Img.Canvas2D.lineTo(w,RY);
61.   Img.Canvas2D.moveTo(RX,0);
62.   Img.Canvas2D.lineTo(RX,h);
63.   Img.Canvas2D.stroke;
64.  
65.  
66.   // Draw Lines On Screen which will be behind image
67.   Screen.Canvas2D.fillStyle(BGRA(240,0,240));
68.   Screen.Canvas2D.lineWidth:=LineWidth;
69.   Screen.Canvas2D.beginPath;
70.   Screen.Canvas2D.moveTo(0,RY+Y);
71.   Screen.Canvas2D.lineTo(1920,RY+Y);
72.   Screen.Canvas2D.moveTo(RX+X,0);
73.   Screen.Canvas2D.lineTo(RX+X,1080);
74.   Screen.Canvas2D.stroke;
75.  
76.   // Draw image on screen
77.   Offset:=1;
78.   info := 'Offset='+FloatToStr(Offset);
79.   Screen.Canvas2D.drawImage(Img,X+Offset,Y+Offset);
80.  
81.   Screen.TextOut(100,50,info,BGRABlack);
82.   Screen.Draw(Canvas,0,0);
83.  
84.   // Change to folder on your machine
85.   Screen.SaveToFile('x:\Temp\image_lines '+FloatToStr(Offset)+'.png');
86.  
87.   Img.Free;
88.   Screen.Free;
89. end;
90.  
91. end.
92.  

[circular]

There is a bug here. I guess I have fixed it on dev branch.
https://github.com/bgrabitmap/bgrabitmap/tree/dev-bgrabitmap

Can you give it a try?

[Coxy]

Hi Circular,

Dev code from github resolved problem, see output below.

Not sure I used correct method for testing dev code, but my steps were,

1) rename "lazarus\2.0.10\Config\onlinepackagemanager\packages\bgrabitmap-master" to "bgrabitmap-master old"
2) created new folder "bgrabitmap-master" and copied in dev code
3) rebuilt and ran example code

If this method is bad practice please let me know correct way.

Thanks for the quick resolution.

[circular]

Hi Coxy,

Thanks for testing.

Well the way you did works, though that may confuse a bit the package manager.

Normally, you can get the dev code in a folder of your choice, then open the package in this folder with Lazarus, and that switches to this version of the package.

[Coxy]

Thanks,

I'll try that in future.

I miss our development environment under VMS on DEC VAXs back in the early 90s, there you could define an environment variable to point to the root of multiple directory trees. When searching for a file relative to the path it would use the first one found while processing the path. So in a dev account you set the environment to one of three modes,

Live, path=LIVE_ROOT
Test, path=TEST_ROOT,LIVE_ROOT
Dev, path=DEV_ROOT,TEST_ROOT,LIVE_ROOT

It made life so much easier for bug tracing, regression testing and development. Wish they had that feature on Windows and Linux.

[circular]

Interesting.

In Lazarus, one can change the paths depending on the compile mode. But I don't think this can affect packages.

There is not much flexibility with packages. For example another feature that would be great would be to use a GUI control package without having to recompile Lazarus.

[winni]

I miss our development environment under VMS on DEC VAXs back in the early 90s, there you could define an environment variable to point to the root of multiple directory trees.

VMS was/is the "super dooper luxury" OS . And DEC was #2 in those days.
A lot of things which where default on VMS/VAX which are still "unknown" today.

Anway: After DEC was sold to Compaq a part of the VMS-Team build Windows NT -
The first (a little bit) "stable" Windows. So it is not a miracle why one of the very first implementations
of NT appeared on a DEC Alpha.

Another part of the VMS team founded Apollo.

Poor conclusion: LIke with cars: Only the main stream survives.
Quality does not matter.

Winni

[trev]

Ah VAXen and VMS - my favourite things were the automated file system version control and DCL. Memories...

[Coxy]

I also heard some of the VMS team went to Microsoft to develop Windows NT.

There was also homage to HAL the computer system from movie "2001: A Space Odyssey", HAL is one letter back from IBM.

VMS is one letter back from W(indows)NT.

Doesn't make sense with numbered OS's, Windows 10 becomes Windows 9.