QML圆规 [英] QML Circular Gauge
本文介绍了QML圆规的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我当前正在创建一个虚拟仪表板,我希望获得针后面的进度条类型,如以下链接所示:https://forum.qt.io/topic/89307/qml-circular-gauge-styling-needle-trailing-colour-glow。
到目前为止,我只使用画布完成了指针进度条。我不明白如何使用带有不透明蒙版的圆锥体渐变来实现 这就是我需要的效果。
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()
}
}
}
我将非常感谢带有解释的示例代码。
推荐答案
您可以使用ConicalGradient
和OpacityMask
。
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
这篇关于QML圆规的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文