Graphx coordinate system and platforms

[Christian Meunier]

Hi @roipeker,

I have observed some weird behaviors regarding the coordinate system and its origin depending on the platform.
I have tested it on OSX and on the web with Flutter 3.3.9

My expectation is as follow, given the following code :

final rect = GShape();
rect.graphics.lineStyle(1, Colors.red, false).drawRect(0, 0, 9, 9);
addChild(rect);

I would expect to see a rectangle of 10px * 10px starting at the very top left of the stage.

1. OSX

With OSX, no matter the app / stage dimension I consistently get the following:

The height of the rectangle is 8px and the width is 9px.

If i want to draw a line at the very top of the stage, i have to do

final vline = GShape();
vline.graphics.lineStyle(1, Colors.green, false).moveTo(0, 2).lineTo(100, 2).endFill();
addChild(vline);

2. Web (Chrome)

Things get funky here, 1px is always missing on the left so the rectangle is 9px wide, same as on OSX.

However depending on the height of the chrome window, the stage origin float between 2 int coordinates and can even fall in between resulting in more than 1 pixel being painted for the line.

The code for the following is exactly as before and what was posted above for the rectangle and the line.
Only the height of the Chrome window changed.

There are probably multiple things at play here but is my expectation correct to begin with ?

[Roi Peker]

That's how Flutter renders the line Paint. Always expect the line to be centered. Regarding the inconsistency on platforms, again should be on Flutter side (GraphX doesn't make much on that area except a warning when not rendering using WebGL as several features are not supported on html rendering).

I would expect to see 0.5px red line on the left side.

Why the web sample is cropped at the bottom?

Try CustomPainter and see if you get different results.

[Roi Peker]

Also, i would suggest u join the Discord or Telegram channels as it seems you are using GraphX regularly; and it's a great way to bounce ideas faster.

[Roi Peker]

That's how Flutter renders the line Paint. Always expect the line to be centered. Regarding the inconsistency on platforms, again should be on Flutter side (GraphX doesn't make much on that area except a warning when not rendering using WebGL as several features are not supported on html rendering).

I would expect to see 0.5px red line on the left side.

Why the web sample is cropped at the bottom?

Try CustomPainter and see if you get different results.

Beware the dpi scale factor in Flutter. 1px is actually a logical pixel... retina renders at 2x. If you wanna get a real pixel line use lineStyle(0)