Fill effect in QML
-
Hello all,
I am facing a problem in QML that i am not able to fill color between two objects. Let me be very clear (as it gonna take too long to explain i suppose). I am trying to create a pie chart to show progress of some process, which have different steps. The pie segments will be divided as per number of steps in that process, at initial that segment should be in "gray" color as showing in progress, and after completion of that step this segment should be in white color as showing completion and start next segment. I have thought to divide the segment as [360/number_of_steps] and will rotate a narrow width (width 2) rectangle with reference to a same static rectangle in clockwise direction. I am not able to fill this color among these elements. Below i am placing my code and few screen shots.
@import QtQuick 1.0
Rectangle {
width: 360
height: 360
id: outer
color: "black"
state: "base"
property int value
property int max: 360
property int min: 0
property int angleRectangle { id: pieC width: 250 height: 250 color: "#000000" radius: 125 clip: false border.width: 3 border.color: "white" anchors.centerIn: parent Rectangle { id: line1 x: 125 y: 0 width: 2 height: 125 color: "#ffffff" } Rectangle { id: line2 x: 125 y: 0 width: 2 height: 125 color: "#ffffff" transformOrigin: Item.Bottom } } Text { id: debugText text: "angle: "+angle+", value: "+value color: "green" } MouseArea { id:mouser anchors.fill: parent onClicked: { outer.value = Math.floor((Math.random()*100)+1) outer.angle = 360-(max-(((max-min)*value)/100)) rot.running = true } } RotationAnimation { id:rot; target: line2; from: 0; to: outer.angle; duration: 500; direction: RotationAnimation.Clockwise }
}
@!http://thoughtsnme.wordpress.com/2012/07/02/pie-chart-with-zero-progress/(Pie with zero progrss)!
!http://thoughtsnme.wordpress.com/2012/07/02/pie-chart-with-a-segment/(Pie with segment which need to be filled with color)!
I have try my best to explain the problem i am facing, even if it is not clear (my apologies), Guys you let me know if more explanation is required.
Thanks and regards,
Punit -
Links to screen shots
"Pie with zero progress":http://thoughtsnme.wordpress.com/2012/07/02/pie-chart-with-zero-progress/"Pie chart with segment which need to be filled":http://thoughtsnme.wordpress.com/2012/07/02/pie-chart-with-a-segment/
-
Hi,
QtQuick 1 doesn't support this type of painting with the built-in elements. One option would be a custom C++ element, such as that described at http://doc.qt.nokia.com/4.7-snapshot/declarative-tutorials-extending-chapter1-basics.html . In QtQuick 2 there is also a Canvas element, which provides a QPainter-like API to QML.
Regards,
Michael