CODEWITHSUNDEEP
qtqml
monkeber
monkeber

Reputation: 81

Border changes width depending on rectangle width

I have a rounded rectangle in QML code and I noticed strange behavior of rectangle's border, when I resize the rectangle its border appears to be flickering a little and if I look closely I can see that its border seems to be changing its width from 1 to 2 and back or something like that, while in code it definitely set to 1 and doesn't depend on anything else. Also rectangle corners seem to be a little bit wider than border at straight sections. I tried to take screenshots of such rectangles but on the screenshots rectangles looks alright so I suppose it may be some rendering issue? It definitely noticeable in the app. On screenshots you can see that the second rectangle has its borders a little bit blurry, thats when the border appears to be wider than normal.

Is this a known problem and are there any settings in Qt I need to change to get consistent border width on my elements?

I'm using Qt 5.15, QML, C++. I could reproduce this behavior on Windows 10 on two different 1440p monitors.

enter image description here enter image description here enter image description here

Edit:

Since my main project is pretty big I will provide example project where I was able to reproduce the issue:

main.cpp

#include <QGuiApplication>
#include <QSurfaceFormat>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
#if defined(Q_OS_WIN)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

main.qml:

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle
    {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        width: parent.width / 3
        height: parent.height / 3

        color: "#F8F8F8"
        radius: 8

        border
        {
            color: "red"
            width: 1
        }
    
        Text
        {
            id: valueField
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            font.pointSize: 10
            text: "100"
            color: "black"
        }
    }
}

The problem is reproducable when width and height of rectangle are bound to width and height of window, if I set them to one specific value - no such issue is present.

Upvotes: 0

Views: 539

Answers (1)

monkeber
monkeber

Reputation: 81

I found that if I do height: Math.round(parent.height / 3) instead of simple height: parent.height / 3, then the issue is gone. As per the comment from @DFaller :

I believe you are correct that this is the solution - QML accepts floats for size but seems to render only in integers, which can causes rounding issues where borders show as either 0 or 2 pixels instead of 1. Rounding as you did has fixed this issue for me in the past.

So posting this as the answer for now.

Upvotes: 0

Related Questions