Qtquick\Qml Arc

fallouthase

Hi everyone,

I recently started with Qt\QML. My goal is to create a GUI that is based on the appearance of J.A.R.V.I.S.
As a starting point I started with the basics - creating a window, some items, rectangles, a clock - stuff like that.
I also started to investigate on how to draw an arc, as I'll need a lot of them. So my goal is to implement a Module/ function, which I input certain parameters (in my mind I have "cenrte", "start angle", "stop angle", "arcthickness", "outerradius") and I'll automaticly generate an arc, that I can place wherever I want. Follwoing I can apply rotations or simmilar things to that component.

From what I found out so far, I can generate an arc with the "canvas" option, which will look simmilar to this:

Rectangle{
            width:400
            height:400
            x:900; y:90
            Canvas {
                anchors.fill: parent
            id:rotatingarc
            RotationAnimator {
                            target: rotatingarc;
                            from: 360;
                            to: 0;
                            duration: 1500
                            running: true
                            loops: Animation.Infinite
                        }
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.reset();
                    var centreX = 200
                    var centreY = 200
                    var thickness =20
                    var radius = 100
                    var innerradius = radius-thickness
                    var startangle=Math.PI*0
                    var endangle=Math.PI*0.5

                    ctx.beginPath();
                    ctx.fillStyle = "#14b2d9";
                    ctx.arc(centreX,centreY,radius,startangle,endangle,false)
                    ctx.arc(centreX,centreY,innerradius,endangle,startangle,true)
                     ctx.fill();
                }
            }
        }

This surely will generat the arc (blue arc in Picture), but will leave me with a white background, and therefore makes it problematic if I want to "stack" multiple arcs, that have the same "centre".
Question to that: is it possible to create the canvas / the rectangle without color and have only the arc painted?

The red arc is created with the "shape" option, but leaves me with this white leftover, which I don't know how to get rid of.
Does anyone know, how to counteract this white leftover?
Also if I use different angles for the shape arc, I run into strange phenomena.
The code for the red arc is:

  Shape{
    width: 120
    height: 130
    x: 600
    y: 700
        ShapePath {
             strokeColor: "red"
             strokeWidth: 20
             capStyle: ShapePath.FlatCap

             PathAngleArc {
                 centerX: 65; centerY: 95
                 radiusX: 45; radiusY: 45
                 startAngle: -90
                 sweepAngle: 90
             }

  }
  }

Is there another option for creating arcs with a function as described in the beginning?

Thanks for any pointers help and input in advance!

oria66

Hi. You can check this to gather more ideas for your JARVIS.

https://marketplace.qt.io/collections/newest/products/circularslider

fallouthase

Thanks - I had a quick glance at it, an there it is done with the shapes method.
I'll have a more detailed look lateron or on the weekend!

ndias

Hi @fallouthase,

Please find bellow a simple example using PathAngleArc:

https://doc.qt.io/qt-6/qml-qtquick-pathanglearc.html

import QtQuick.Shapes
    
        Shape {
            width: 200
            height: 200
            anchors.top: parent.top
            anchors.left: parent.left
            // Enable multisampled rendering
            layer.enabled: true
            layer.samples: 4
    
            // Outer gray arc:
            ShapePath {
                fillColor: "transparent"
                strokeColor: "gray"
                strokeWidth: 20
                capStyle: ShapePath.RoundCap
                PathAngleArc {
                    centerX: 100; centerY: 100
                    radiusX: 100-20/2; radiusY: 100-20/2
                    startAngle: 135
                    sweepAngle: 270
                }
            }
    
            // Inner blue arc:
            ShapePath {
                fillColor: "transparent"
                strokeColor: "blue"
                strokeWidth: 20
                capStyle: ShapePath.RoundCap
                PathAngleArc {
                    centerX: 100; centerY: 100
                    radiusX: 100-20/2; radiusY: 100-20/2
                    startAngle: 135
                    sweepAngle: 180
                }
            }
        }

You can also use already implemented customizable QML Circular Slider:

https://github.com/arunpkqt/CircularSlider

Best Regards