QML Arc inside rectangle

Question

I am trying to draw an arc inside a rectangle with QML. I have found an example in the Qt Documentation using Path and PathArc element. I adapted it to the following

Rectangle {
    id: back
    width: 20
    height: width
    Path {
        startX: back.width/2
        startY: back.height*2/3
        PathArc {
            radiusX: back.width/3
            radiusY: back.height/3
            x: back.width/6
            y: back.height/2
        }
    }
}

However I have the problem that nothing is displayed. I have found no method to set the color of the arc so I am not really sure what happens (either nothing is painted or it is painted with the background color). Can anyone help ?

Answer 1

As hinted by the documentation of Qt from https://doc.qt.io/qt-5/qml-qtquick-path.html:

Note: Path is a non-visual type; it does not display anything on its own. To draw a path, use Shape.

Path doesn't really 'draw' anything.

What you are looking for is most probably something like this 'ShapePath', that one has a strokeColor and strokeWidth

Shape {
   width: 300
   height: 300

   ShapePath {
      strokeWidth: 8
      strokeColor: 'red'
      startX: 0; startY: 100
      PathArc {
         x: 100; y: 200
         radiusX: 100; radiusY: 100
         direction: PathArc.Clockwise
      }
   }
}

Answer 2

As hinted by derM, when you need to achieve more complex drawing, Canvas is the solution that will offer the best capabilities and flexibility.

You will find it similar to HTML canvas, allowing you to draw using Javascript. And QML Context2D indeed includes the arc method. Here is an untested sample

import QtQuick 2.9

Rectangle {
    width: 200
    height: 200
    color: "blue"

    Canvas {
        anchors.fill: parent
        onPaint: {
            var ctx = getContext("2d");

            // White line, 2px width
            ctx.strokeStyle = Qt.rgba(1, 1, 1, 1);
            ctx.lineWidth = 2;
            ctx.beginPath();

            // Draws an arc, anticlockwise inside the rectangle/square
            //      center             radius   start    end        clockwise
            ctx.arc(width/2, height/2, width/2, Math.PI, 3*Math.PI, false);

            // Draw the arc
            ctx.stoke();
        }
    }

You can have a look at the Context2D API for the list of methods you can use.