Snapping does not work properly due to rounding errors

[Domske]

The snapping feature of Designer does not properly work. Ok, in general it works fine. But you don't see this in most of time. But if you want to work exactly, you will notice that suddenly some elements overlaps or are too small. Just a fraction of a pixel. "Move by whole pixel" does also not work. Sometimes you see values like 48.1 or 47.9 instead of 48. But even if you see 48. It's not exact rounded under the hood. I suspect it's maybe 48.0001 which are rounded on UI but not actual on the element. Which results in slightly sloppy edges. Because either the background shines through or overlaps another element. So you'll see a pixel line on the edge with opacity depending on the rounding error. Long story short:

- The "Move by whole pixel" feature should not allow other than integer. Perfect rounded values without fraction. Only 0, 1, 2, 3, 4. Not 0, 0.5, 1.9 or 1.00000001 (behind the scenes).

- The snapping feature should fix the rounding error. Check your source code and ensure a rounded value. Maybe cast to interger. I don't know what language you use...

- Alternative it would be great if there is a button or menu entry somewhere what fixes all rounding issues of all elements. Just iterate through all elements and points and round it to integer pixel. But don't cut like a cast to interger. Because 2.9 becomes to 2 (should be 3).

You can see this issue when exporting pixel image like PNG or enable pixel view mode.

Affinity Designer 2.2.1

Edited November 15, 2023 by Domske

[Hangman]

Hi @Domske and welcome to the forums,

Could you provide a sample Affinity Designer file that demonstrates the issue as I'm not seeing any obvious problem here with accuracy or snapping...

[Old Bruce]

My understanding is that the Move by Whole Pixel takes precedence over the Snap to Pixels. In order to ensure pixel perfect work you must start working with Pixels as the Unit of Measurement and have only Snap to Pixels turned on in the Snapping options. Move by Whole Pixels is perhaps useful for some projects but it is a disaster for Pixel Perfect work, turn it off.

[Domske]

I extracted the issue from my original project which I was working on for some time. In this example I moved rect on rect with snap and whole pixel option. And at some point it happened that the position or size of an element suddenly shifted by a fraction of a pixel. I suspect that snap or rounding didn't work properly. I cannot reproduce it on a new file. It's like the Heisenberg's indeterminacy principle or demonstration effect. But I've experienced this on several projects where I wanted to perfectly snap to elements. In general it's about primitive shapes like rectangles. And in this particular case I see rounded numbers on the Transform panel (x, y, width, height). Ok, let me explain ... I have some files for you...

You can see a darker line between the 2 green rectangles. It's because the background shines through.

Both rect have exact 48 x 48 px. And have the position 0, 0 and 48, 0. No fraction visible on Transform panel (right bottom). I always snapped and moved by whole pixel. But at some point the fraction appeared. I didn't see at first glance. I cannot explain. I never moved or snapped the elements other than full pixels. But in general it works great. So I cannot reproduce it on a new file. It just occurs on real projects when working some time on it.

When I export the project as SVG, I see a fraction value for width. It's 47.975 not 48 for the first rect. So there is a gap between. Not sure if this only occurs to the size...

I attached the afdesign and SVG files in demo.zip. If you click on each rectangle you can see on the Transform panel of Designer that the values are integers 0, 0, 48, 48. No fraction visible. The value on UI is rounded up to 1 decimal places. If you re-enter the value from keyboard, then the values are correct as displayed and the gap disappears.

Not sure if this will help. Since it's not clear when this issue occurs. Therefore I would rather suggest to implement or change the feature for working on whole pixels. It must be ensured that all elements are always moving and sizing on whole pixels. Even if an element was on e.g. x 12.3. The x value must be rounded to full pixels like 12 when moved. Same with the size. My unit is in px btw. But regardless of the unit. It means integer values not float. Pixels or centimeters does not matter.

I mean "Force Pixel Alignment" and "Move by whole Pixels" should work as I expect. Never allow float/fraction values. Maybe only if you enter the value manually to the Transfrom panel. But if you move or resize the element, it should always have integer values. And in my case, you see the value 48, but behind the scene it's 47.975 or whatever other floating point. I suspect that there was a rounding error while I worked on the project. I cannot say, when this happens. And I cannot prove if this was a user error. But I swear I never moved or resized by fraction values. Always used the snap feature. My proposal: The Pixel options should work as expected. Only integers allows. Or implement another option to only work with integer. Maybe allow float for manual input. But as soon as the user moves the element again, it snaps back to the integer (rounded value). Or for what else are the options "Force Pixel Alignment" and "Move by whole Pixels"? Ok, the Move by whole Pixels is about the movment itself. Means e.g. from x 12.3 to 13.3 and so on. So I think it works as intended. It's ok. And what does "Force Pixel Alignment"? Anyway... it would be great if there is an additional option to snap always to integer values.

 

 

demo.zip

Edited November 16, 2023 by Domske

[walt.farrell]

1 minute ago, Domske said:

No fraction visible on Transform panel

Have you adjusted your application Settings (User Interface) to increase the number of decimal places displayed for pixel measurements? I would suggest at least three, but I often use six.

[Old Bruce]

12 minutes ago, Domske said:

I mean "Force Pixel Alignment" and "Move by whole Pixels" should work as I expect. Never allow float/fraction values.

If you have something which is off by a tiny fraction of a pixel in its x, y co-ordinates (or width and height) and you have Move by Whole pixels on then it will include that tiny fraction of a pixel when it moves. The Move by Whole Pixel will be honoured over the Snap to Pixels. 

Also if you have the dimensions, width and height, set to be a tiny fraction of pixel off this tiny fraction will be honoured if you have Snap to Object Bounding boxes turned on. Further if you have Snap to Mid Points set for the Bounding box and the object is an odd number of pixels wide the snapping may be at a half pixel. Similar things can happen if any items are rotated.

For Pixel Perfect work start with Pixels as the unit of measurement and turn on Force Pixel Alignment and only Force Pixel Alignment in the Snapping section. Force Pixel alignment will move objects by whole pixels only, pretty much by definition.

[Domske]

Good hint walt.farrell, thanks. I hope, there will never be a value like 0.0000001. ^^ I wouldn't go higher than 3 decimal places.

Another idea: An option to ensure that values are rounded to specific decimal places. So that the actual values are always the same as displayed on UI. Or display an icon (warning icon) what informs that the actual value and displayed values are different. And a click on the icon, fixes it by rounding to the given decimal places. But the integer option I suggested above would be also great.

 

[Domske]

Hmm, ok Old Bruce. This seems to work better. Thanks. I understand... Ok, it doesn't explain where the float values come from. Since I always worked with integer and snapping option. But anyway... it maybe fixes the problem... Will see next time. I just wish there was a button to iterate and align all element positions and sizes to full pixel. I have a lot of them to fix now. 😓^^

Btw. do the options Force Pixel Alignment and Move By Whole Pixels not conflict? I mean, Force Pixel Alignment should be dominant. Whatever... It resolves my issue by disable Move By Whole Pixels and only tick Force Pixel Alignment. It's ok... 👍

[Old Bruce]

22 hours ago, Domske said:

 Force Pixel Alignment should be dominant.

If you think about it then there would be no way to move something that is at x, y co-ordinates of 100.5, 4.5 pixels by whole pixels to say 120.5, 40.5 It would snap to 102.0, 40.0. Myself I do not see a situation where I would need to move things by whole pixels as opposed to just moving them and having them snap to pixels. I am sure there are situations where this is desirable (maintaining fractional pixel co-ordinates) but I cannot think of any.