QML半圆编程[重复]

Question

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

这段代码画了一个圆，但是我如何在 QML 中画一个半圆呢？

Answer 1

您可以通过在此处放置一个遮蔽矩形 (z>0) 并将绘制的内容剪切到根窗口来遮盖这个“伪圆”的下部：

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

更新： 或者不带面具的简化：

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

事实上你的代码没有画圆，而是画圆角的矩形。如果您想要一些绘画功能，请使用Canvas（简单方法）或 QQuickItem（“正确”且更快的方法）。

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();
    }
}