Path {} blurs straight lines

[george-hopkins]

I'm trying to render two lines, each 1px wide, separated by a 1px gap:

Path {
    commands: "M 0 0 h 1 v 50 h -1 z m 2 0 h 1 v 50 h -1 z";
    fill: black;
    height: 50px;
    width: 50px;
}

Magnified 10x (height: 500px): The magnified version shows crisp edges, however the black bars are still too wide (12px instead of 10px) and the gap is only 8px wide. Is there a setting to tweak this behaviour?

[tronical]

I wonder if perhaps what you're seeing is anti-aliasing "quality".

I made a test-case like this:

export component Testcase inherits Window {
    preferred-width: 300px; preferred-height: 300px;

     Path {
         commands: "M 0 0 h 1 v 50 h -1 z m 2 0 h 1 v 50 h -1 z";
         fill: black;
         height: 50px;
         width: 50px;
     }
}

and this is the rendering I get on macOS:

With the FemtoVG renderer:

With Skia (Metal):

With Skia (OpenGL):

With Qt:

In a way it's unlikely that they'd all look identical, but on the other hand the FemtoVG result stands out by what looks like an anti-aliasing effect.

If I explicitly disable anti-aliasing I get a better result:

I pushed the branch to https://github.com/slint-ui/slint/commits/simon/path-antialias-option/ .

However the screenshot you posted shows a bad width, instead of a surrounding shade of grey.

Could you try with different renderers? That would help us isolate things a little. Also, perhaps you could try the above branch and add an anti-alias: false; to the Path and see if that improves the rendering for you.

[george-hopkins]

Thank you for the detailed analysis! The anti-alias option does fix the issue indeed. The lines end up crisp and distinguishable. It would be great if this addition could be integrated into the main version.