QML semicircle programming

Question

Rectangle {
    x: -185
    y: -92
    width: 214
    height: 184
    color: "red"
    border.color: "black"
    border.width: 5
    radius: 100
}

This code draws a circle, but how can I draw a semicircle in QML?

Answer 1

You could mask the lower part of this "pseudocircle" by placing a masking rectangle there (z>0) and clipping the painted content to the root window:

import QtQuick 2.7
import QtQuick.Window 2.2

Window{
    id: root
    visible: true
    width: 300
    height: 300

    Item {
        width: 100
        height: 100
        anchors.centerIn: parent
        clip:true

        Rectangle{
            id: circ
            width: parent.width
            height: parent.height
            border.width: 2
            radius:1000
            border.color: "black"
        }

        Rectangle{
            id:mask
            width: parent.width
            height: parent.height/2
            anchors.bottom: parent.bottom
            z:4
        }
    }
}

Update: Or simplified without a mask:

import QtQuick 2.7
import QtQuick.Window 2.2

Window{
    id: root
    visible: true
    width: 300
    height: 300

    Item {
        id: semicirc
        width: 2*50
        height: 50
        anchors.centerIn: parent
        clip:true

        Rectangle{
            id: circ
            width: parent.width
            height: parent.width
            border.width: 2
            radius:1000
            border.color: "black"
        }
    }
}

Answer 2

In fact your code doesn't draw circle, that draws rectangle with round corners. If you want some painting functionality use Canvas (easy way) or QQuickItem ("right" and faster way).

Canvas {
    width: 200
    height: 200
    onPaint: {
        var context = getContext("2d");
        context.arc(100,100,95,0,Math.PI);
        context.strokeStyle = "blue";
        context.lineWidth = 5;
        context.stroke();
    }
}