luoyayun361的专栏

不积跬步无以至千里~

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

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

阅读更多
版权声明: https://blog.csdn.net/luoyayun361/article/details/80687430
个人分类: QML
想对作者说点什么? 我来说一句

qt 实现阴影窗口

2018年02月07日 30KB 下载

Qml外部阴影相关代码DropShadow

2017年07月28日 648B 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭