slint-ui / slint

Slint is a declarative GUI toolkit to build native user interfaces for Rust, C++, or JavaScript apps.
https://slint.dev
Other
17.54k stars 600 forks source link

Different rectangle border-radius rendering effect between skia and femtovg #2461

Closed chenbaiyu0414 closed 1 year ago

chenbaiyu0414 commented 1 year ago

The femtovg render result is correct but skia not. (note the blue rectangle)

屏幕截图 2023-04-01 005925

top uses femtovg and bottom uses skia.

slint file:

component TabItem {
    in property <string> title;
    in property <bool> selected;
    callback clicked <=> area.clicked;

    VerticalLayout {
    alignment: center;

        Text {
            font-size: 20px;
            text: title;
            color: selected ? Theme.palette.text-primary : area.has-hover ? Theme.palette.neutral-plain-hover-color : Theme.palette.neutral-plain-disabled-color;
            vertical-alignment: center;

            Rectangle {
                y: 28px;
                width: selected ? parent.width * 0.6 : 0px;
                height: 6px;
                border-radius: 2px;
                clip: true;
                background: Theme.palette.primary-400;

                animate width { 
                    duration: 150ms;
                    easing: ease-in-out;
                }
            }

            area := TouchArea {
                mouse-cursor: pointer;
            }

            animate color { 
                duration: 150ms;
                easing: ease-in-out;
            }
        }
    }
}
chenbaiyu0414 commented 1 year ago

After some investigation, I think maybe the problem is related to scale factor. I have a 4K monitor and usually use 150% scale factor, rectangle draw by femtovg works perfect whether 100%, 150% or 200%, but skia works bad on all three kinds of scale factor, the rectangle draw by skia has no anti-aliasing effect and bad shape.

chenbaiyu0414 commented 1 year ago

BTW I'm using slint 0.3.5

slint = { version = "0.3.5", default-features = false, features = [
    "std",
    "backend-winit",
    "renderer-winit-skia",
    "compat-0-3-0",
] }
tronical commented 1 year ago

Hmm we fixed anti aliasing with rectangles and Skia after 0.3.5 in

https://github.com/slint-ui/slint/commit/7d984c7cb9db78ace5479bd09f054217df670088

Could you try with master? Otherwise we're going to make a new release next week :)

chenbaiyu0414 commented 1 year ago

Nice, I'll test after the new release

tronical commented 1 year ago

Thanks for testing ❤️