Signals in Qt Quick Controls



  • I am trying to develop a small QML application that consists of a circle that redraws itself using the value from a spinbox as the radius. I have managed to write the initialisation code but I am unable to find the signal that can call requestPaint() on the canvas containing the circle. I have added the code below. If someone could point me in the right direction or provide a comprehensive document about using Qt widgets in QML, that would be great.

    import QtQuick 2.0
    import QtQuick.Controls 1.0
    
    Item {
        id: item
        width: 400
        height: 400
        property var radius: spin.value
        Canvas {
            id: canvas
            width: parent.width
            height: 0.75*parent.height
    
            onPaint: {
                // Get drawing context
                var context = getContext("2d");
    
                // Make canvas all white
                context.beginPath();
                context.clearRect(0, 0, width, height);
                context.fill();
    
                context.beginPath();
                context.fillStyle = "orange"
                context.strokeStyle = "red"
                context.moveTo(width/2+60, height/2);
                context.arc(width/2, height/2, 100, 0, 2*Math.PI, true)
                context.fill();
                context.stroke();
    
                context.translate(width/2,height/2);
    
                for(var i = 0;i<12;i++){
                    context.beginPath();
                    context.lineWidth = 1;
                    context.moveTo(0,0);
                    context.strokeStyle = "yellow";
                    context.lineTo(0,-100);
                    context.stroke();
                    if(i!=12){
                    context.rotate(Math.PI/6);
                    }
                }
    
                context.beginPath();
                context.fillStyle = "white";
                context.strokeStyle = "black";
                context.moveTo(0, 0);
                test();
                context.arc(0, 0, radius, 0, 2*Math.PI, true);
                context.fill();
                context.stroke();
    
    
                //redraw();
                //signal spin.valueChanged();
            }
        }
        Rectangle{
            id: rect;
            color: "white";
            x: 10;
            y: 0.75*parent.height;
            width: parent.width-20;
            height: 0.25*parent.height-20;
            border.color: "black"
    
            SpinBox{
                id: spin
                anchors.centerIn: rect.Center
                maximumValue: 100
                minimumValue: 0
                value: 40
    
            }
        }
        function test(){
            radius = spin.value
            redraw()
            //console.log(spin.data)
            return radius
        }
        function redraw(){
            canvas.requestPaint()
        }
    }
    

    The final design looks like this (https://imgur.com/a/UcJQC)

    The white circle is the one that should redraw itself. Another doubt I have is regarding the spokes. The way I drew it is I drew a single radius line and rotated the canvas. But one of the spokes is shorted that the rest and is visible over the white circle (which it shouldn't).



  • @cryomick
    Hi, look at this article https://evileg.com/en/post/296/ , maybe it will help something



  • How about (untested):

    SpinBox {
        // …
        onValueChanged: canvas.requestPaint()
    }
    

    Or alternatively:

    Component.onCompleted: spin.valueChanged.connect(canvas.requestPaint);
    

    Also, your onPaint code starts off a little weird:

    // Make canvas all white
    context.beginPath();
    context.clearRect(0, 0, width, height);
    context.fill();
    

    I'm pretty sure 2 of those 3 code lines are unnecessary.

    1. There's no reason to begin a path before calling clearRect().
    2. You don't need to fill() after calling clearRect(). Indeed, since you created a new path right before calling fill(), it will have no effect.


  • Thank you!! This was what I was looking for!!!!


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.