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

时间:2014-10-13 09:06:34

标签: image qt qml paint

我正在尝试在Qt Quick中制作一个可以显示"点亮"从0到针的位置。

我能想到这样做的一种方法是通过制作片段的图像并将其绘制并从代码中旋转多次。但是,我不知道如何在QML中完成这项工作。

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

编辑:制作粗略的草图,但StackOverflow要求我有10个声望发布,所以我放置链接。

No segments illuminated ---------------------------- Some segments illuminated
enter image description here - enter image description here

1 个答案:

答案 0 :(得分:4)

您可以轻松地使用Canvas元素绘制弧形笔划,并控制其开始和结束位置。只需将其低于量表的刻度即可。

下面是一个示例,如何使用0到1之间的值来选择" full"仪表是。

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

根据米奇的要求,我解释一下 - 由于Qt绘制弧线的方式,画布以90°C的角度旋转 - 它们不会在" 12 o'时钟"但是在3.你可以删除画布的旋转,以防万一你可能想要绘制额外的东西,因为你不想让你所有的绘图偏移在90度只是坐在旋转的画布上,所有你需要做的是摆脱旋转是在范围-Math.PI * 0.5Math.PI * 1.5范围内绘制弧线,以便从3点开始计算艺术品。