QML文本投影阴影
问题描述:
是否有向QML中的文本对象添加外阴影的正确方法?我试过使用DropShadow,但它用黑色填充整个文本字段。QML文本投影阴影
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
答
最简单的方法是使用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:“递归”必须是递归呈现时设置为true。
谢谢!我尝试了图层并应用了效果,但是如果将锚定应用于文本对象,它将忽略它。但是,如果我使用第二种方法并将DropShadow作为兄弟,它将使用锚点。 – Fredro
嗯,看起来如果你从第一个代码片段中取出'anchors.fill:parent',那么它仍然有效。我可能不小心将它留在了。更新了答案。 – Mitch