QML 圆规答案 - 爱码网

【问题标题】：QML Circular GaugeQML 圆规
【发布时间】：2019-09-03 13:43:13
【问题描述】：

我目前正在创建一个虚拟仪表板，我想在针后面获取进度条类型，如以下链接所示：https://forum.qt.io/topic/89307/qml-circular-gauge-styling-needle-trailing-colour-glow。

到目前为止，我只使用 Canvas 完成了针状进度条。我不明白如何使用带有不透明蒙版的 conicalGradient 来实现我需要的效果。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

ApplicationWindow 
{

    id:root
    visible: true
    width: 1024
    height: 600
    property int external_width: 534
    property int external_height: 533
    property bool external_reverse: false
    property int external_angle: 0
    property int externalstart_angle: 138 //138
    property int external_angle_limit: 360//264
    property int external_radius: 235
    property int external_lineWidth: 60

    Canvas {
        id: external_progress_bar
        width: root.external_width
        height: root.external_height
        x: (root.width - width)/2
        y: (root.height - height)/2
        property real angle: 260
        property real nextAngle: (Math.PI/180)*angle
        property color col: "red"
        onPaint: {
            var ctx = getContext("2d");
            ctx.reset();
            ctx.beginPath();
            ctx.arc(width/2, height/2, root.external_radius, (Math.PI/180) * root.externalstart_angle,(Math.PI/180) * root.externalstart_angle + nextAngle, root.center_reverse);
            ctx.lineWidth = root.external_lineWidth
            ctx.strokeStyle = col
            ctx.stroke()
        }
    }
}

我将非常感谢带有解释的示例代码。

【问题讨论】：

标签： qt qml gradient opacitymask

【解决方案1】：

您可以使用ConicalGradient 和OpacityMask。

用不同的颜色创建相同的画布。然后，一个从透明到白色的 ConicalGradient 和一个用于减少画布绘制区域的蒙版：

Canvas {
        id: external_progress_bar
        ...
         visible: false // Not visible (it will be painted by the mask)
    }

    ConicalGradient {
        id: progress
            anchors.fill: external_progress_bar
            angle: 45.0 // Change this angle to move the gradient effect
            gradient: Gradient {
                GradientStop { position: 0.0; color: "transparent" }
                GradientStop { position: 0.1; color: "white" } // Just a part of the canvas
            }
             visible: false // Not visible (it will be painted by the mask)
    }
    OpacityMask {
            anchors.fill: progress
            source: external_progress_bar
            maskSource: progress
            invert: true
        }

你会得到：

有关 OpacityMask 的更多说明，请参阅Qt documentation

【讨论】：