How to change Shape color

[sene]

Hi. I created an arc shape via QML. I want to make another color only selected area in image. But i can't figure it out. I tried gradient fill but couldn't success. Any help?

Code:

ShapePath {
            id: pathFG
            strokeColor: "#0b0b0b"
            fillColor: "transparent"
            strokeStyle: ShapePath.DashLine
            dashPattern: [290, 6]
            strokeWidth: 2

            PathAngleArc {
                radiusX: (mainWindow.width / 2) - (pathFG.strokeWidth / 2)
                radiusY: (mainWindow.height / 2) - (pathFG.strokeWidth / 2)
                centerX: (mainWindow.width / 2)
                centerY: (mainWindow.height / 2)
                startAngle: -220
                sweepAngle: 260
            }
        }

[Bob64]

@sene never used this as it's not in my version, but don't you need to set the fillColor to something other than "transparent"?

[sene]

@Bob64 Thank you for reply. Actually fillColor fills inside the circle. I want change strokeColor which is marked with yellow pen.

PS. the black stroke is another PathAngleArc.

[Bob64]

@sene OK, sorry - when you mentioned "selected area", it sounded like you meant the area enclosed by the arc.

[govind_ashrit]

@sene Do you need something like this ?

We could make the code concise with repeater/model containing the stroke color, startAngle and sweepAngle

Shape{
    ShapePath {
        id: redquadrant
        strokeColor: "red"
        fillColor: "transparent"
        strokeStyle: ShapePath.DashLine
        dashPattern: [290, 6]
        strokeWidth: 2
        PathAngleArc {
            radiusX: (mainWindow.width / 2) - (redquadrant.strokeWidth / 2)
            radiusY: (mainWindow.height / 2) - (redquadrant.strokeWidth / 2)
            centerX: (mainWindow.width / 2)
            centerY: (mainWindow.height / 2)
            startAngle: -180
            sweepAngle: 180
        }
      }
    ShapePath {
        id: yellowquadrant
        strokeColor: "yellow"
        fillColor: "transparent"
        strokeStyle: ShapePath.DashLine
        dashPattern: [290, 6]
        strokeWidth: 2
        PathAngleArc {

            radiusX: (mainWindow.width / 2) - (yellowquadrant.strokeWidth / 2)
            radiusY: (mainWindow.height / 2) - (yellowquadrant.strokeWidth / 2)
            centerX: (mainWindow.width / 2)
            centerY: (mainWindow.height / 2)
            startAngle: 0
            sweepAngle: 100
        }
      }
    ShapePath {
        id: greenquadrant
        strokeColor: "green"
        fillColor: "transparent"
        strokeStyle: ShapePath.DashLine
        dashPattern: [290, 6]
        strokeWidth: 2
        PathAngleArc {

            radiusX: (mainWindow.width / 2) - (greenquadrant.strokeWidth / 2)
            radiusY: (mainWindow.height / 2) - (greenquadrant.strokeWidth / 2)
            centerX: (mainWindow.width / 2)
            centerY: (mainWindow.height / 2)
            startAngle:  100
            sweepAngle: 90
        }
      }
}

Let me know if this helps.

Regards,
govind

[sene]

@govind_ashrit Thank you for your reply. Sorry I didn't mention it but my sweepAngle changing dynamically. The value coming from a C++ script. When I try your example the shapes rotating independently. So what I want is when first shape reaching last point other colored shape starting rotate.

Basically like this. I try the gradient but didn't work for me.