Solved 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.
- There's no reason to begin a path before calling
clearRect()
. - You don't need to
fill()
after callingclearRect()
. Indeed, since you created a new path right before callingfill()
, it will have no effect.
- There's no reason to begin a path before calling
-
Thank you!! This was what I was looking for!!!!