Dirty corners of round rectangle not smooth

Question

I have simple rounded rectangle but like 4 side or like draw circular with radius: width/2 the 4 corners are not smooth. I add some effect like Gaussian blur but can not handle that. I tried with Bezier curve but I had some issues. As you can see these images the dirty of corners is obviously.

corners (not smooth):

other side (smoothed):

Window {
    id: window
    width: 401
    height: 400
    visible: true
    
    color: 'gray'   

    Slider{
        id: slider
        from: 1
        to: 5
        onValueChanged: console.log("value :"+value)
    }

    Rectangle{
        id: rec
        x: 90
        y:150

        color: 'transparent'
        border.color: "#262626"
        border.width: 1

        width: Math.round(parent.width * .5)
        height: Math.round(width*.6)

        radius: 10
        layer.enabled: true

    }
    GaussianBlur {
        anchors.fill: rec
        source: rec
        radius: 2
        samples: 30
        deviation: 1
        clip: true
    }

}

My propose is (draw with Adobe Illustrator):

score 1 · Answer 1 · answered Jul 31 '21 at 07:35

1

This is just regular antialiasing playing here. Running the code with antialiasing: false in Rectangle will result in a jagged edge instead of a blurry edge:

In rasterisation (converting mathematic shapes into pixels) there is always a tradeoff between jaggyness and blurryness. When used in a application with more complex shapes this won't be noticable any more!

For more information on this topic the keywords would be: rasterisation, aliasing, antialiasing.

Here is the minimal example of it working without the blurry edge but aliased:

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Rectangle{
        id: rec
        x: 90
        y:150
        antialiasing: false
        color: 'transparent'
        border.color: "#262626"
        border.width: 1

        width: Math.round(parent.width * .5)
        height: Math.round(width*.6)

        radius: 10
        layer.enabled: true

    }
}

answered Jul 31 '21 at 07:35

Baumflaum

749
7
20

Thx, with ur way, the corners are changed but not enough at all. For better my propose, when you draw a round rectangle with Photoshop or Illustrator, entire of shape is same render and smoothed but in code I can't draw similar shape. – S At Jul 31 '21 at 10:34
It's because illustrator works with paths and no matter how far you zoom in it will raster it optimally for your screen-zoom combination. Try the same with Photoshop and you will notice the same problem as with your code (given comparable resolutions). – Baumflaum Jul 31 '21 at 13:43
I tried with `shape` and `canvas` but encountered same prb. – S At Jul 31 '21 at 19:16
With Photoshop? In that case my answer solves at least your confusion? – Baumflaum Jul 31 '21 at 20:27
No with qml, unfortunately your method can not solve that, wanna entire of my shape as same. – S At Aug 01 '21 at 13:30
Focus bro: you will NOT be able to have a 10px radius rounded corners without any aliasing effects in qml. It is simply not possible. Imagine painting a perfect round edge with quadratic legos: won't happen. – Baumflaum Aug 01 '21 at 17:33
1

Ok, ;) but I make better view with `sample layer` BUT wanna exacting this. If my desirable will not happen!, This is Big Bug. – S At Aug 02 '21 at 13:18
2

@Baumflaum's answer is correct, whether you accept it or not. That's the way pixel drawing works. If you like the results that Photoshop gives you, then save the corners as images and tell Qt to draw those images instead. (But I doubt you will like that result either.) – JarMan Aug 02 '21 at 13:33
Also that is NOT a bug. But I also encourage you to export your Photoshop/Illustrator rounded edges as images and using them as corner images just to check how the result looks. – Baumflaum Aug 02 '21 at 17:22