Signals in Qt Quick Controls

cryomick

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).

Troffe

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

Phrogz

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.

There's no reason to begin a path before calling clearRect().
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.

cryomick

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