Wie man Schlagschatten für Rectangle auf QtQuick 2.0 erstellt

Question

Wie kann ich einen Schlagschatten für eine Rectangle visuelle Element auf QtQuick 2.0 zeichnen?
Ich mag einen Schlagschatten für mein Hauptfenster zeichnen (Ich habe ein transparentes und nicht dekoriertes Fenster)

Answer 1

Als Abhilfe für das Schatten Ausgabe abgeschnitten, können Sie Ihre Rectangle in einem Item, mit zusaetzliche Rand setzen Verwischradius in Rechnung zu tragen, und gelten Schatten auf diesem Container:

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

Interessante Frage ... Ich habe nach einem besseren Weg gesucht, dies zu tun. Dies ist meine schnelle und schmutzige Art, einen Schlagschatteneffekt für ein QML Rectangle zur Zeit zu erreichen.

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

Verwenden Sie einfach DropShadow vom QtGraphicalEffects Modul.

Ein komplettes, funktionierendes Beispiel:

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

Beachten Sie, dass Sie eine Reihe von Warnungen wie diese sehen:

Datei: ///opt/Qt5.0.1/5.0.1/ gcc_64/qml/QtGraphicalEffects/DropShadow.qml: 391: 5: QML-Quellproxy: Bindungsschleife für Eigenschaft "Ausgabe" erkannt file: ///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/ GaussianDirectionalBlur.qml: 66: 5: QML SourceProxy: Bindungsschleife für Eigenschaft "Ausgabe" 012 erkanntfile: ///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml: 61: 5: QML SourceProxy: Bindungsschleife für Eigenschaft "Ausgabe" erkannt file: /// opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/privat/GaussianDirectionalBlur.qml: 66: 5: QML SourceProxy: Bindungsschleife für Eigenschaft "Ausgabe" erkannt file: ///opt/Qt5.0.1/ 5.0.1/gcc_64/qml/QtGraphicalEffects/privat/GaussianDirectionalBlur.qml: 61: 5: QML SourceProxy: Bindungsschleife für Eigenschaft "Ausgabe" erkannt file: ///opt/Qt5.0.1/5.0.1/gcc_64/ qml/QtGraphicalEffects/private/GaussianGlow.qml: 53: 5: QML SourceProxy: Bindeschleife für Eigenschaft "output" erkannt

Diese Warnungen sind QTBUG-28521, die in Qt 5.0.2 behoben wurde (die zum Zeitpunkt der Erstellung dieses Artikels noch nicht veröffentlicht wurde). Glücklicherweise gibt es kein wirkliches Problem, abgesehen von der nervigen Konsolenausgabe.

Answer 4

ich den Code versucht oben und es fügt tatsächlich einen Schatten hinzu, obwohl in meinem Fall, einfach ein anderes Rechteck mit einem Bit auf einem Offset zu addieren gab mir einen Effekt, den ich mehr mochte.

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 
} 

Als nächstes fügen Sie das Rechteck auf dem Sie den Schatten wollen, und Sie nennen es rect_withShadow