概述
前面写过一篇文章介绍如何使用 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
}
}
}
直接拿来用就可以了。
示例代码在这里