Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to change Shape color



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

    3ee65b64-0da5-49e9-9bb3-d7e49e8f84f6-image.png

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


  • @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"?



  • @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.



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



  • @sene Do you need something like this ?
    c0e529ef-afc0-45fc-aa31-1cc412cf5733-image.png

    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



  • @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.

    alt text


Log in to reply