Question

在QML中是否有正确的方法将外部阴影添加到文本对象中？我尝试过使用DropShadow，但它用黑色填充整个文本字段。

Text {
    id: textId
    font.pixelSize: 36
    font.letterSpacing: 0.9
    color: "red"
    text: "Hello World"

    DropShadow {
        anchors.fill: parent
        verticalOffset: 2
        color: "#80000000"
        radius: 1
        samples: 3
    }
}

我还尝试用source替换anchors.fill并设置文本ID。还有Text对象外的DropShadow。没有阴影。

我的目标是获得相当于css风格的

text-shadow: 0 2px 4px

Answer 1

最简单的方法是使用item layers：

import QtQuick 2.9
import QtQuick.Window 2.3
import QtGraphicalEffects 1.0

Window {
    id: window
    width: 800
    height: 600
    visible: true

    Text {
        id: textId
        font.pixelSize: 36
        font.letterSpacing: 0.9
        color: "red"
        text: "Hello World"

        layer.enabled: true
        layer.effect: DropShadow {
            verticalOffset: 2
            color: "#80000000"
            radius: 1
            samples: 3
        }
    }
}

您也可以在DropShadow docs中完成此操作，其中DropShadow是兄弟项目：

import QtQuick 2.9
import QtQuick.Window 2.3
import QtGraphicalEffects 1.0

Window {
    id: window
    width: 800
    height: 600
    visible: true

    Text {
        id: textId
        font.pixelSize: 36
        font.letterSpacing: 0.9
        color: "red"
        text: "Hello World"
    }

    DropShadow {
        anchors.fill: textId
        source: textId
        verticalOffset: 2
        color: "#80000000"
        radius: 1
        samples: 3
    }
}

在您的情况下，您错过了source作业，但如果您尝试将阴影作为Text的子项，那么您也会收到有关递归渲染的错误：

ShaderEffectSource：递归渲染时，'recursive'必须设置为true。

QML文字投影

1 个答案: