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



  • 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


Log in to reply
 

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