Как создать тень для Rectangle на QtQuick 2.0

Question

Как рисовать тень для визуального объекта Rectangle на QtQuick 2.0?
Мне нравится нарисовать тень для моего главного окна (у меня есть прозрачное и незакрашенное окно)

Answer 1

В качестве временного решения для обрезанного теневого вопроса, вы можете положить ваши Rectangle в Item с additionnal краем принять радиус размытия в счете, и применить тень на этом контейнер:

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

Просто используйте DropShadow из QtGraphicalEffects модуля.

Полный рабочий пример:

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: обнаружен цикл привязки для свойства «output» file: ///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/ GaussianDirectionalBlur.qml: 66: 5: QML SourceProxy: обнаружен цикл привязки для свойства «output» файл: ///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml: 61: 5: QML SourceProxy: обнаружен цикл привязки для свойства «output» 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: обнаружен цикл привязки для свойства «output» 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