如何在QtQuick 2.0上爲矩形創建陰影效果

Question

如何在QtQuick 2.0上爲Rectangle視覺項目繪製陰影效果？
我喜歡爲我的主窗口繪製陰影（我有一個透明且沒有裝飾的窗口）

Answer 1

至於修剪陰影問題的解決方法，你可以把你Rectangle在Item，與其它附加保證金採取的帳戶模糊半徑，以及集裝箱上應用的影子：

import QtQuick 2.0 
import QtGraphicalEffects 1.0 

Item { 
    width: 320 
    height: 240 

    Item { 
     id: container 
     anchors.centerIn: parent 
     width: rect.width + (2 * rectShadow.radius) 
     height: rect.height + (2 * rectShadow.radius) 
     visible: false 

     Rectangle { 
      id: rect 
      width: 100 
      height: 50 
      color: "orange" 
      radius: 7 
      antialiasing: true 
      border { 
       width: 2 
       color: "red" 
      } 
      anchors.centerIn: parent 
     } 
    } 

    DropShadow { 
     id: rectShadow 
     anchors.fill: source 
     cached: true 
     horizontalOffset: 3 
     verticalOffset: 3 
     radius: 8.0 
     samples: 16 
     color: "#80000000" 
     smooth: true 
     source: container 
    } 
} 

Answer 2

有趣的問題...我一直在尋找更好的方法來做到這一點。這是我暫時對QML Rectangle實現陰影效果的快速和骯髒的方法。

Rectangle{ 
    width: 500 
    height: 500 
    color: "dark grey" 


    Rectangle { 
     id: backgroundRect 
     width: 200 
     height: 150 
     radius: 5 
     anchors.centerIn: parent 
     color: "red" 

     Rectangle { 
      id: dropShadowRect 
      property real offset: Math.min(parent.width*0.025, parent.height*0.025) 
      color: "purple" 
      width: parent.width 
      height: parent.height 
      z: -1 
      opacity: 0.75 
      radius: backgroundRect.radius + 2 
      anchors.left: parent.left 
      anchors.leftMargin: -offset 
      anchors.top: parent.top 
      anchors.topMargin: offset 
     } 
    } 
} 

Answer 3

只需使用QtGraphicalEffects模塊中的DropShadow即可。

一個完整，工作示例：

import QtQuick 2.0 
import QtGraphicalEffects 1.0 

Rectangle { 
    width: 640 
    height: 480 
    color: "blue" 

    Rectangle { 
     id: rect 
     anchors.centerIn: parent 
     width: 100 
     height: 100 
     color: "red" 
    } 

    DropShadow { 
     anchors.fill: rect 
     cached: true 
     horizontalOffset: 3 
     verticalOffset: 3 
     radius: 8.0 
     samples: 16 
     color: "#80000000" 
     source: rect 
    } 
} 

注意，你會看到這樣一些警告：

文件：///opt/Qt5.0.1/5.0.1/ gcc_64/qml/QtGraphicalEffects/DropShadow.qml：391：5： QML SourceProxy：檢測到屬性「輸出」的綁定循環 file：///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/ GaussianDirectionalBlur.qml：66：5： QML SourceProxy：檢測屬性「output」012的綁定循環file：///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61：5： QML SourceProxy：檢測屬性「輸出」的綁定循環 file：/// opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml：66：5： QML SourceProxy：檢測屬性「output」的綁定循環 file：///opt/Qt5.0.1/ 5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml：61：5： QML SourceProxy：檢測到屬性「輸出」的綁定循環 file：///opt/Qt5.0.1/5.0.1/gcc_64/ qml/QtGraphicalEffects/private/GaussianGlow.qml：53：5：QML SourceProxy：檢測屬性「輸出」的綁定循環

這些警告是QTBUG-28521，已在Qt 5.0.2中修正（在撰寫本文時尚未發佈）。幸運的是，除了惱人的控制檯輸出之外，沒有任何實際問題。

Answer 4

我試過代碼上面，它實際上增加了一個陰影，雖然在我的情況下，簡單地添加另一個矩形與一個偏移量位給我一個效果，我更喜歡。

Rectangle{ 

    id: rec_Shadow 
    height:rect_withShadow.height 
    width: rect_withShadow.width 
    border.color: "#B3B3B3" 
    color: "#C5C5C5" 

    anchors{ 
      verticalCenter: rect_withShadow.verticalCenter 
      horizontalCenter: rect_withShadow.horizontalCenter 
      horizontalCenterOffset: 5 
      verticalCenterOffset: 5 
     } 
    radius: rect_withShadow.radius 
} 

接下來您可以添加要在其上陰影的矩形，並調用它rect_withShadow