Qt QML实现阴影字体

概述

前面写过一篇文章介绍如何使用 QML 做渐变色字体,文章在这里,还写过一篇文章是用 QML 实现发光呼吸动画字体,文章在这里。今天介绍一种关于字体的新的效果,用 QML 实现阴影效果字体。

正文

废话不多说,先看效果:

其中字体颜色和阴影颜色都可以自定义,已经封装起来了。
直接看代码吧:

Item {
    id: root
    implicitHeight: labelTextMetrics.tightBoundingRect.height
    implicitWidth: label.implicitWidth

    property alias text: label.text
    property alias font: label.font
    property alias horizontalAlignment: label.horizontalAlignment
    property alias verticalAlignment: label.verticalAlignment
    property bool glowEnabled: true
    property color glowColor: "#1d6d64"

    Label {
        id: label
        anchors.baseline: root.baseline
        color: root.color

        layer.enabled: root.glowEnabled
        layer.effect: Glow {
            color: glowColor
            samples: 20
            spread: 0.3
        }

        TextMetrics {
            id: labelTextMetrics
            text: label.text
            font: label.font
        }

        transform: Translate {
            y: -labelTextMetrics.tightBoundingRect.y
        }
    }
}

直接拿来用就可以了。
示例代码在这里

猜你喜欢

转载自blog.csdn.net/luoyayun361/article/details/80687430
今日推荐