问在QML中画一个圆弧/圆扇区？
EN

Stack Overflow用户

提问于 2014-09-25 09:39:18

回答 4查看 26.7K关注 0票数 14

我知道，可以使用以下代码在QML中绘制圆圈：

Rectangle {
     width: 150
     height: 150
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.top: parent.top
     color: "#095e7b"
     border.color: "#0a2f4a"
     border.width: 2
     radius: width*0.5
}

我的问题是:如果我需要画一个圆的扇形，该怎么办？(比萨饼片)并使每个切片可点击？我可以只使用QML来完成这个任务吗？

qml

draw

geometry

sector

回答 4

Stack Overflow用户

回答已采纳

发布于 2014-09-25 10:10:00

是的，使用画布(和Context2D)：

import QtQuick 2.3

Rectangle {
    width: 400
    height: 400

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

            var centreX = width / 2;
            var centreY = height / 2;

            ctx.beginPath();
            ctx.fillStyle = "black";
            ctx.moveTo(centreX, centreY);
            ctx.arc(centreX, centreY, width / 4, 0, Math.PI * 0.5, false);
            ctx.lineTo(centreX, centreY);
            ctx.fill();

            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.moveTo(centreX, centreY);
            ctx.arc(centreX, centreY, width / 4, Math.PI * 0.5, Math.PI * 2, false);
            ctx.lineTo(centreX, centreY);
            ctx.fill();
        }
    }
}

实际上，在Qt的画布实现这画布API时，我从HTML5答案中获取了这段代码。这使得在web上找到示例变得非常容易；例如，只需搜索“绘制饼片html5画布”即可。

为了老鼠的检测，你得把你的数学技能.

..。或者从这里窃取代码。:)

请注意，画布只有在调整大小或调用requestPaint()时才会重新绘制，因此，如果要根据鼠标位置更改切片的颜色，则需要调用该函数来查看颜色的变化。

票数 19

Stack Overflow用户

发布于 2020-01-20 00:45:22

使用qml绘制它，您不需要画布。作为指导原则，在决定实现之前，我通常先看一下Qt的示例。下面的代码可以在“形状”示例中找到。

import QtQuick 2.11
import QtQuick.Shapes 1.15

Shape {
    width: 120
    height: 130
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    // multisample, decide based on your scene settings
    layer.enabled: true
    layer.samples: 4

    ShapePath {
        fillColor: "black"
        strokeColor: "darkBlue"
        strokeWidth: 20
        capStyle: ShapePath.FlatCap

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

票数 15

Stack Overflow用户

发布于 2016-04-25 07:30:03

使用图表http://doc.qt.io/QtCharts/qtcharts-qmlmodule.html

import QtQuick 2.0
import QtCharts 2.0

ChartView {
width: 400 
height: 300
theme: ChartView.ChartThemeBrownSand
antialiasing: true

PieSeries {
    id: pieSeries
    PieSlice { label: "eaten"; value: 94.9 }
    PieSlice { label: "not yet eaten"; value: 5.1 }
}
}