以编程方式绘制速度计的亮部分

Question

以编程方式绘制速度计的亮部分

imageqtqmlpaint

3

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

我能想到的一种方法是使用一个部分的图像，并在代码中多次对其进行绘制和旋转。但是，我不知道如何在QML中实现这一点。

它不必是QML，也不必是Qt Quick；只要我可以在Qt Creator中使用它并且最好跨平台工作即可。

编辑：制作了草图，但StackOverflow要求我拥有10个声望才能发布它们，因此我放置了链接。

未照明的部分 ---------------------------- 一些部分被照亮
enter image description here -

- Alejandro

1

请提供您想要实现的内容的屏幕截图/GIF/视频。 - Mitch

我想这可以很容易地通过使用Image和其中一种动画效果来完成。当然，这是在纯QML中实现的。 - folibis

@Mitch：添加了图片链接。 - Alejandro

@folibis：我会查看你建议的“Animations”，谢谢。 - Alejandro

@folibis 我希望这些片段保持亮着，所以我不认为你的建议适合我（或者我还没有理解如何操作）。 - Alejandro

我编辑了这个问题，给它一个更具描述性的标题；希望你不介意！ - Mitch

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dtech · Accepted Answer

您可以使用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的要求，我解释一下 - 画布以90度逆时针旋转是因为Qt绘制弧线的方式 - 它们不是从“12点钟”开始，而是从3点钟开始。如果您需要绘制额外的内容，可以删除画布的旋转，因为您不希望所有的图形都偏移90度才能与旋转的画布相匹配。您只需要在范围内绘制弧线-Math.PI * 0.5到Math.PI * 1.5来处理从3点钟开始的弧线即可。