image - 以编程方式绘制速度计的照明部分

Question

我正在尝试在 Qt Quick 中制作一个仪表，其中的部分从 0 到针的位置“亮起”。

我能想到的一种方法是获取片段的图像并根据代码对其进行绘制和旋转多次。但是，我不知道如何在 QML 中完成此操作。

它不一定是 QML 也不一定是 Qt Quick；它可以是任何东西，只要我可以将它与 Qt 一起使用并在 Qt creator 中使用它，并且最好跨平台工作。

编辑:画了粗略的草图，但 StackOverflow 要求我有 10 个声誉才能发布它们，所以我放置了链接。

No segments illuminated -------------------------- Some segments illuminated
-

Answer 1

您可以轻松地使用 Canvas 元素绘制弧形笔划，并控制其开始和结束位置。只需将其写在仪表刻度以下即可。

下面是一个示例，说明如何使用 0 到 1 之间的值来选择仪表的“满”程度。

ApplicationWindow {
    visible: true
    width: 500
    height: 500

    Canvas {
        id: canvas
        anchors.fill: parent
        rotation: -90

        onPaint: {
            var c = getContext('2d')
            c.clearRect(0, 0, width, height)
            c.beginPath()
            c.lineWidth = 30
            c.strokeStyle = "red"
            c.arc(250, 250, 250 - 15, 0, Math.PI * 2 * circ.value)
            c.stroke()
        }
    }

    Slider {
        id: circ
        minimumValue: 0
        maximumValue: 1
        value: maximumValue / 2
        onValueChanged: canvas.requestPaint()
    }
}

根据 Mitch 的要求，我解释 - 由于 Qt 绘制弧线的方式， Canvas 以逆时针旋转 90 度 - 它们不是从“12 点”开始，而是从 3 点开始。您可以删除 Canvas 的旋转以防万一你可能想画额外的东西，因为你不想让你的所有绘图偏移 90 度只是为了坐在旋转的 Canvas 上，你需要做的就是画弧来摆脱旋转在 -Math.PI * 0.5 到 Math.PI * 1.5 范围内，以说明从 3 点钟开始的艺术。