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

Posted 2023-02-16

【中文标题】以编程方式绘制车速表的照明部分

【英文标题】：Programmatically paint an illuminated section of a speedometer

【发布时间】：2014-10-13 09:06:34

【问题描述】：

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

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

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

编辑：做了粗略的草图，但 *** 要求我有 10 个声望才能发布它们，所以我放置了链接。

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

【问题讨论】：

请提供您想要达到的目标的屏幕截图/GIF/视频。

使用 Image 和我猜的其中一种动画可以轻松完成。在纯 QML 中

@Mitch：添加了图片链接。

@folibis：我会看看你建议的“动画”，谢谢

@folibis 我希望这些片段保持明亮，所以我认为您的建议对我不起作用（或者我不明白如何）

【参考方案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 点开始的艺术。

【讨论】：

+1 画布。 :) 这几乎就是我会做的，除了旋转技巧；如果绘制某些内容（例如文本，仅作为示例），这将导致不希望的旋转。您可以在此处提及为什么要轮换，以便人们知道它为什么存在以及我刚才提到的副作用。

这个解决方案虽然不准确，但非常好。此外，它让我想到了用画布的 onPaint 内的弧线绘图来重复绘制旋转的图像，以防万一我绝对需要。