如何在QML中绘制弧线/圆形扇形？

Question

我知道可以使用以下代码在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来完成？

- RafaelTSCS

Answer 1

是的，可以使用Canvas（和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的Canvas实现了HTML5 Canvas API。这让在网上查找示例变得非常容易; 例如，只需搜索“draw pie slice blah html5 canvas”。

对于鼠标检测，你需要重新掌握一下数学技能 ...

...或者只需从这里偷取代码。:)

请注意，Canvas仅在调整大小时重新绘制，或在调用requestPaint()时重新绘制。因此，如果您想根据鼠标位置更改切片的颜色，则需要调用该函数以查看颜色更改。

- Mitch

Answer 2

使用 QML 来绘制它，不需要使用画布。作为指导，通常在决定实现之前会先查看 Qt 的示例。下面的代码可以在“Shapes”示例中找到。

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

- joy

Answer 3

使用图表 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 }
}
}

- Dany19

---

许可警报！我们这些编写商业代码的人需要注意：与Qt的大多数组件不同，QtCharts不是根据LGPL许可证授权的。如果您的产品是闭源的，则需要购买商业版Qt许可证才能使用QtCharts。 - pestophagous

Answer 4

由于问题涉及绘制“披萨片”并使每个披萨片可点击，因此一个重要的细节是将点击映射到正确的部分（也就是正确的“披萨片”）。之前的回答中似乎都没有包含任何onClicked处理，所以我提供另一种可能性。（之前的所有回答都是有效的，只是它们没有立即清楚地说明在哪里拦截点击。）

我曾遇到过类似的情况，需要在45度对角线上切割矩形，并检测点击是否落在对角线上方或下方。

幸运的是，QML允许您：

• 创建一个网格
• 对该网格应用transform: Rotation
• ...然后自动处理您的点击
  • （意思是：在45度旋转的矩形上单击会按照您希望的方式映射）

演示代码呈现了一个旋转的网格，如下所示，并通过console.log输出您单击的颜色：

以下内容已在Ubuntu上使用Qt 5.14进行过测试。

import QtGraphicalEffects 1.12
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Universal 2.2
import QtQuick.Layouts 1.14

Item {
  height: 1000
  width: 2000

  GridLayout {
    id: grid
    columnSpacing: 0 // the default is non-zero!
    rowSpacing: 0
    anchors.centerIn: parent
    rows: 2
    columns: 2

    Rectangle {
      height: 200
      width: 200
      color: 'red'
      MouseArea {
        anchors.fill: parent
        onClicked: {
          console.log('red')
        }
      }
    }
    Rectangle {
      height: 200
      width: 200
      color: 'yellow'
      MouseArea {
        anchors.fill: parent
        onClicked: {
          console.log('yellow')
        }
      }
    }
    Rectangle {
      height: 200
      width: 200
      color: 'green'
      MouseArea {
        anchors.fill: parent
        onClicked: {
          console.log('green')
        }
      }
    }
    Rectangle {
      height: 200
      width: 200
      color: 'blue'
      MouseArea {
        anchors.fill: parent
        onClicked: {
          console.log('blue')
        }
      }
    }
    transform: Rotation {
      origin.x: grid.width * 0.5
      origin.y: grid.height * 0.5
      axis {
        x: 0
        y: 0
        z: 1
      }
      angle: 45
    }
  }
}

- pestophagous