如何将渐变颜色应用于 ArcItem 描边颜色?

Question

我想让 ArcItem 采用渐变色。无法在Qt Design Studio中将笔触颜色设置为渐变，然后我尝试使用ColorOverlay，但这不起作用。

如何存档？

import QtQuick.Studio.Effects 1.0
import QtQuick.Shapes 1.0
import QtQuick.Timeline 1.0
Rectangle {
id: rectangle
width: Constants.width
height: Constants.height
color: "#000000"
ArcItem {
id: arc
x: 0
y: 0
width: 331
height: 327
outlineArc: false
capStyle: 0
antialiasing: true
strokeStyle: 1
end: 145
strokeWidth: 20
begin: -145
strokeColor: "#f72e2e" // --> This in gradient color
fillColor: "#00000000"
ColorOverlayItem {
id: colorOverlay
x: 0
y: 0
width: 331
height: 319
}
}

Answer 1

以下示例应该适用于 Qt5 + 此外，您将拥有花哨的发光效果

你可以和它一起玩。

import QtQuick 2.15
import QtQuick.Controls 2.15
import smartDash 1.0
import QtQuick.Studio.Components 1.0
import QtQuick.Shapes 1.0
import QtQuick.Studio.Effects 1.0
import QtQuick3D 1.15
import QtGraphicalEffects 1.0
Rectangle {
width: 300
height: 300
color: "#262626"
Item {
x: 0
y: 0
width: 300
height: 300

ArcItem {
id: glowingArc
x: 20
y: 20
width: 255
height: 255
opacity: 1
dashPattern: [0.2, 0.3, 0.1, 0.2]
strokeStyle: 1
arcWidthBegin: 0
arcWidth: 0
clip: true
dashOffset: 2
end: 0
begin: 360
strokeWidth: 13
radiusInnerAdjust: 0
outlineArc: false
capStyle: 0
fillColor: "#00000000"
strokeColor: "#b3cc9e00"
visible: false
}
Glow {
x: 2
y: 2
anchors.fill: glowingArc
radius: 19
samples: 17
color: "#dbbb1f"
source: glowingArc
spread: -0.4
}
ConicalGradient {
id: gradient
anchors.fill: glowingArc
angle: -360
gradient: Gradient {
GradientStop {
position: 0.1
color: "black"
}
GradientStop {
position: 0.0
color: "transparent"
}
}
visible: false
}
OpacityMask {
anchors.fill: gradient
source: glowingArc
maskSource: gradient
invert: false
}
}
}