FluClip 在1080 分辨率下模糊

zhuzichu520 / FluentUI

FluentUI for QML

MIT License

3.14k stars 419 forks source link

FluClip 在1080 分辨率下模糊 #435

Open TONYGFX opened 4 months ago

TONYGFX commented 4 months ago

FluClip控件在我1080显示器上显示像是有一层毛玻璃效果 moaboli

在我2k显示器上就没有这个情况 PixPin_2024-02-23_09-27-34

zhuzichu520 commented 4 months ago

在1080显示器去掉FluClip试试效果如何，看能不能确定一下是不是FluClip导致的....

TONYGFX commented 4 months ago

左侧是FluCip 右侧是image 有点一模糊但不是很明显缩小后比较明显

zhuzichu520 commented 4 months ago

没复现出来，能把你的图片提供一下么？我再试试...是Qt5.15.2还是Qt6？ 1708688124930

TONYGFX commented 4 months ago

avatar1 这个是原图我回家之后用家里电脑试了一下，可能不是分辨率问题，之前说1080下比较模糊可能给你带来了误导，用了家中的4k显示器发现也会出现，笔记本上的3k显示器不是很明显 4k（150%）: 3k（150%）: 在考虑是不是显示器的缩放导致的 @zhuzichu520

zhuzichu520 commented 4 months ago

已修复此问题 https://github.com/zhuzichu520/FluentUI/commit/86c94c6c75e1ff78846af1614f3b80f1ad71e184 FluClip添加了一行代码：

layer.textureSize: Qt.size(control.width*Math.ceil(Screen.devicePixelRatio),control.height*Math.ceil(Screen.devicePixelRatio))

拉下代码再试试~

TONYGFX commented 4 months ago

感谢! 但是下拉代码重新编译后好像还是没有变化😢

zhuzichu520 commented 4 months ago

额，那在mian函数加上

QGuiApplication::setHighDpiScaleFactorRoundingPolicy(Qt::HighDpiScaleFactorRoundingPolicy::Round);

试试

TONYGFX commented 4 months ago

好像还是没有效果之前我用了其他方式来让图片加上圆角，这种方式没有变模糊，其实也是加遮罩 Item {

    Image {
        id: image
        source: "image"
        asynchronous: true
        width: 200
        height: 200

        fillMode: Image.PreserveAspectFit
        clip: true
        visible: false
    }

    // 圆角遮罩Rectangle
    Rectangle {
        id: maskRec
        anchors.centerIn: parent
        width: image.width
        height: image.height

        color: "transparent"
        Rectangle {
            anchors.centerIn: parent
            width: image.paintedWidth
            height: image.paintedHeight
            color: "black"
            radius: 10
        }
        visible: false
    }

    OpacityMask {
        id: mask
        anchors.fill: image
        source: image
        maskSource: maskRec
        // visible: false
    }
}

AvatarItem {
    id: avatarItem
    avatarSource: chatBubbleImageSource
    avatarWidth: 40
    avatarHeight: 40
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
}
希望能够有帮助

zhuzichu520 commented 4 months ago

我尝试用了你的方式，发现也会模糊。

TONYGFX commented 4 months ago

这就奇怪了🤣