15

RectangleQtQuick 2.0 でビジュアル アイテムのドロップ シャドウを描画するにはどうすればよいですか?
メイン ウィンドウにドロップ シャドウを描画するのが好きです (透明で装飾のないウィンドウがあります)。

4

4 に答える 4

16

クリップされた影の問題の回避策として、ぼかし半径を考慮して追加のマージンを指定して、そのコンテナーに影を適用することができます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
    }
}
于 2013-03-26T14:18:51.383 に答える
8

モジュール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
    }
}

次のような多くの警告が表示されることに注意してください。

file:///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: プロパティ「出力」に対してバインディング ループが検出されました file:///opt/Qt5.0.1/5.0.1/gcc_64/qml /QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61:5: QML SourceProxy: プロパティ「出力」ファイルのバインド ループが検出されました。 :66:5: QML SourceProxy: プロパティ "output" のバインド ループが検出されました file:///opt/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61:5: QML SourceProxy:プロパティ「出力」ファイルでバインディング ループが検出されました:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianGlow.qml:53:5: QML SourceProxy: プロパティ「出力」のバインディング ループが検出されました

これらの警告はQTBUG-28521であり、Qt 5.0.2 で修正されています (この記事の執筆時点ではまだリリースされていません)。幸いなことに、煩わしいコンソール出力を除けば、実際の問題はありません。

于 2013-03-19T01:39:24.490 に答える
5

興味深い質問です...これを行うためのより良い方法を探していました。これは、当分の間、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
        }
    }
}
于 2013-03-19T00:09:12.970 に答える
0

上記のコードを試してみたところ、実際には影が追加されましたが、私の場合は、オフセットに少しだけ別の長方形を追加するだけで、より気に入った効果が得られました。

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
}

次に、影が必要な Rectangle を追加し、rect_withShadow と呼びます。

于 2015-03-14T06:58:27.607 に答える