Jak utworzyć cień dla prostokąta na QtQuick 2.0

Question

Jak mogę narysować cień dla elementu wizualnego Rectangle na QtQuick 2.0?
Chciałbym narysować cień dla mojego głównego okna (mam przezroczyste i niezadrukowane okno)

Answer 1

Jako obejście dla ściętym kwestii cienia, można umieścić Rectangle w Item, z marginesem źródło dodatkowego wziąć promień rozmycia na koncie i zastosować cień na tym pojemniku:

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

Interesujące pytanie ... Szukałem lepszego sposobu na zrobienie tego. To jest mój szybki i brudny sposób na uzyskanie efektu cienia dla prostokąta QML.

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

Wystarczy użyć DropShadow z modułu QtGraphicalEffects.

Kompletny, działający przykład:

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

Zauważ, że pojawi się szereg ostrzeżeń takiego:

pliku: ///opt/Qt5.0.1/5.0.1/ gcc_64/qml/QtGraphicalEffects/DropShadow.qml: 391: 5: QML SourceProxy: Wykryto wiążącą pętlę dla właściwości "output" file: ///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/ GaussianDirectionalBlur.qml: 66: 5: QML SourceProxy: Wykryto pętlę powiązania dla właściwości "output" file: ///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml: 61: 5: QML SourceProxy: Wykryto wiążącą pętlę dla właściwości "output" file: /// opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml: 66: 5: QML SourceProxy: Wykryto pętlę powiązania dla właściwości "output" file: ///opt/Qt5.0.1/ 5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml: 61: 5: QML SourceProxy: Wykryto wiążącą pętlę dla właściwości "output" file: ///opt/Qt5.0.1/5.0.1/gcc_64/ qml/QtGraphicalEffects/private/GaussianGlow.qml: 53: 5: QML SourceProxy: wykryto pętlę powiązania dla właściwości "output"

Te ostrzeżenia to QTBUG-28521, które zostały naprawione w Qt 5.0.2 (która w momencie pisania tego tekstu nie została jeszcze wydana). Na szczęście nie ma rzeczywistego problemu, poza irytującym wyjściem konsoli.

Answer 4

Próbowałem kod powyżej i w rzeczywistości dodaje cień, chociaż w moim przypadku dodanie kolejnego prostokąta z odrobiną przesunięcia dało mi efekt, który mi się podobał.

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 
} 

Następnie należy dodać prostokąt, na którym chcesz cień, a ty nazywasz to rect_withShadow