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。