qt - 如何将 Gradientcolor 应用于 ArcItem Strokecolor？

Question

我想在 Gradientcolor 中使用 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
        }
    }

标签： qtqml

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