Fill effect in QML

Punit_Tak

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 angle

Rectangle {
    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

Punit_Tak

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/

mbrasser

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