Text becomes blurry when resizing window

2
votes

I have a centered rectangle with a drop shadow behind it and some text within it. 

import QtQuick 2.5
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {

    visible: true
    width: 800; height: 640

    Rectangle{

        id: centerRect
        width: parent.width * 0.7; height: parent.height * 0.7

        anchors{
            horizontalCenter: parent.horizontalCenter
            verticalCenter: parent.verticalCenter
        }

        radius: 7
        border.color: "#C0C0C0"

        Text{

            text: "Hello World!"
            font.pixelSize: 0.07 * parent.height

            anchors{

                horizontalCenter: parent.horizontalCenter
                verticalCenter: parent.verticalCenter
            }
        }
    }

    DropShadow
    {
        anchors.fill: centerRect
        horizontalOffset: 1; verticalOffset: 1
        radius: 5
        samples: 11
        color: "#CDCDCD"
        source: centerRect
    }
}

When I resize the window the text becomes slightly blurred or out of focus. I thought it may have been an issue with how I'm scaling the font pixel size to the rectangle height but the problem is the same with static values. If I remove the drop shadow effect the text's visibility is fine when I resize the window.

How can I maintain good text visibility when using a drop shadow and resizing the window? I'm using Qt 5.5.1 on OpenSUSE Leap 42.1 (Plasma 5.5.5).

2
qtqmlqtquick2
It could be an issue with your window manager that does the window resizing. What effects do you have set in KWin? Does changing the effects also affect your issue? (Shift-Alt-F12 to enable/disable compositing, KWin settings, etc.) – user23573
@BogdanWilli I did combinations of changing the rendering backend and disabling the compositor on plasma but the result is the same. – DanielJG

2 Answers

1
votes

Solution 1: Use DropShadow only for the background rectangle and draw the text on top of that.

Solution 2: Use integral width and height for the centerRect. The graphical effect renders the centerRect first into a texture. If the source width or height are not integers, the texture size will not correspond to the original item size. When painting the texture, texture coordinates will not hit the pixel positions accurately and some interpolation is needed.

1
votes

For me, the simplest is to move the Text out of centerRect, so it will not be its child obj, so not influced by the side effect of DropShadow. eg:

move the text outside and modify its conditioning like below:

Text{

    text: "Hello World!"
    font.pixelSize: 0.07 * centerRect.height
    anchors.centerIn: centerRect

}