以编程方式绘制车速表的照明部分

Question

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

我能想到的一种方法是制作片段的图像并绘制它并从代码中多次旋转它。但是，我不知道如何在 QML 中做到这一点。

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

编辑：做了粗略的草图，但 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 绘制弧线的方式，画布以 90 度逆时针旋转 - 它们不是从“12 点”开始，而是从 3 点开始。您可以删除画布的旋转以防万一你可能想画额外的东西，因为你不想让你的所有绘图偏移 90 度只是为了坐在旋转的画布上，你需要做的就是摆脱旋转画弧在-Math.PI * 0.5 到Math.PI * 1.5 的范围内，以说明从 3 点开始的艺术。