Question

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

此代码绘制一个圆圈，但如何在QML中绘制半圆？

Answer 1

事实上，您的代码不会绘制圆圈，而是绘制带圆角的矩形。如果你想要一些绘画功能，可以使用Canvas（简单方法）或QQuickItem（＆＃34;右＆＃34;以及更快的方式）。

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

Answer 2

你可以通过在那里放置一个掩蔽矩形（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"
        }
    }
}

QML半圆编程

2 个答案: