Come creare un'ombra esterna per Rettangolo su QtQuick 2.0

Question

Come posso disegnare un'ombra esterna per un elemento visivo Rectangle su QtQuick 2.0?
Mi piace disegnare un'ombra esterna per la mia finestra principale (ho una finestra trasparente e non decorata)

Answer 1

Come soluzione alternativa per il rilascio ombra tagliato, si può mettere il Rectangle in un Item, con un margine additionnal a prendere raggio di sfocatura in conto, e applicare ombra sul quel contenitore:

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

Domanda interessante ... Ho cercato un modo migliore per farlo. Questo è il mio modo rapido e sporco di realizzare un effetto ombra esterna per un rettangolo QML per il momento.

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

Basta usare DropShadow dal modulo QtGraphicalEffects.

Un completo, esempio di lavoro:

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

Nota che si vedrà una serie di avvertimenti come questo:

di file: ///opt/Qt5.0.1/5.0.1/ gcc_64/qml/QtGraphicalEffects/DropShadow.qml: 391: 5: QML SourceProxy: Rilevato loop di binding per la proprietà "output" file: ///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/ GaussianDirectionalBlur.qml: 66: 5: QML SourceProxy: Rilevato loop di binding per la proprietà "output" file: ///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml: 61: 5: QML SourceProxy: loop di rilegatura rilevato per la proprietà "output" file: /// opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml: 66: 5: QML SourceProxy: Rilevato loop di binding per la proprietà "output" file: ///opt/Qt5.0.1/ 5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml: 61: 5: QML SourceProxy: Rilevato loop di binding per la proprietà "output" file: ///opt/Qt5.0.1/5.0.1/gcc_64/ qml/QtGraphicalEffects/private/GaussianGlow.qml: 53: 5: QML SourceProxy: Rilevato loop di binding per la proprietà "output"

Questi avvisi sono QTBUG-28521, che è stato corretto in Qt 5.0.2 (che al momento della stesura di questo documento non è ancora stato rilasciato). Fortunatamente, non c'è nessun problema reale, a parte la fastidiosa uscita della console.

Answer 4

ho provato il codice sopra e infatti aggiunge un'ombra, anche se nel mio caso semplicemente aggiungendo un altro rettangolo con un bit su un offset mi ha dato un effetto che mi è piaciuto di più.

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 
} 

Poi si aggiunge il rettangolo in cui si desidera l'ombra, e si chiamano rect_withShadow