QML文本投影阴影

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

你也可以做到像它在DropShadowdocs的完成，其中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。