Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

In QML how can I work with an inverted font without resizing my window



  • So what I have is a simple clock with a font where the foreground and background colors are reversed. I want the window to have the color white and the inner time string to be black. Anyway this is my code:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.5
    import QtQml 2.12
    Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("Clock")
    
        property string mytime: ""
        property bool isAm: true
        Timer{
            interval: 250; running: true; repeat: true
            onTriggered:{
                mytime = Qt.formatDateTime(new Date(), "hh:mm:ss")
                if (Qt.formatDateTime(new Date(), "AP") == "AM"){
                    isAm = true
                }else{
                    isAm = false
                }
            }
            
        }
        Rectangle{
            anchors.fill: parent
            color: "white"
        }
    
        Rectangle{
            x: mylab.x
            y: mylab.y
            width: mylab.width
            height: mylab.height
            anchors.fill: parent
            color: "black"
        }
        Label{
            id: mylab
            x: parent.width / 2 - width / 2  + 26
            y: parent.height / 2 - height / 2
            font.family: "7 SEGMENTAL DIGITAL DISPLAY"
            font.pixelSize: 128
            text: mytime
            color: "white"
    
        }
    
        Canvas{
            id: mycanvas
    
            width: 50
            height: mylab.height
            x: mylab.x - 52
            y: parent.height / 2 - height / 2
            onPaint: {
                var ctx = getContext("2d");
                ctx.fillStyle = Qt.rgba(1, 1, 1, 1);
                ctx.fillRect(0, 0, width, height);
                ctx.fillStyle = Qt.rgba(0, 0, 0, 1);
                var siz = 20
                var locx = width / 2 - siz / 2
                var locy
                if (isAm){
                    locy = height / 4 - siz / 2
                }else{
                    locy = height * .75 - siz / 2
                }
                ctx.ellipse(locx, locy, siz, siz)
                ctx.fill()
            }
        }
    
     }
    
    

Log in to reply