36.qt quick-DropShadow背景阴影

DropShadow继承于Item类型.
DropShadow可以设置某个Item或者某个图片的阴影背景,并将其放置在源对象的后面，创建一个柔和的阴影。
阴影的颜色可以用color属性来改变。阴影的位置可以通过horizontalOffset和verticalOffset属性来改变。
它的属性如下所示:

• cached : alias,缓存,默认为false.
• color : alias,设置阴影颜色值,默认值为"black"
• horizontalOffset : real,horizontalOffset和verticalOffset属性定义了渲染阴影相对于DropShadow项目位置的偏移量,默认值为0
• verticalOffset : real
• radius : int,设置阴影柔和度,为0的话表示不模糊,默认值为floor(samples/2)
• samples : alias,设置模糊计算的采样样本多少,默认为9,值越大,渲染越慢,模糊效果越好
• source : alias,设置生成阴影的源对象
• spread : alias,设置伸展系数(扩大阴影倍数),默认为0,不伸展
• transparentBorder : alias,设置模糊边框,默认为true,如果为false,那么对于不透明边缘的图像将不会得到模糊的阴影

对于Item类型,可以通过下面两个附加属性实现外部阴影

• layer.enabled : bool,设置图层使能,默认false.要设置阴影的话,必须设置为true
• layer.format : enumeration,设置图层效果,通常是一个ShaderEffect组件

修改之前的代码 32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)

修改之前:

 修改之后:

修改如下所示:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.12
Window {
    id: wind
    visible: true
     flipable.width * 1.3
    height: flipable.height * 1.3
    flags: Qt.Window | Qt.FramelessWindowHint
    property var angleVlue : 0
    color: "#00000000"

    Flipable {
       id: flipable
        426
       height: 327
       y:  (wind.height - height) /2
       x: (wind.width - width) /2
       property bool flipped: false

       front: Image {
           id: frontImage
           anchors.fill: flipable
           source: "qrc:/1.png"
           smooth: true
           antialiasing: true
           layer.enabled: true
           layer.effect: DropShadow {
           }

       }
       back: Image {
           id: backImage
           anchors.fill: flipable
           source: "qrc:/2.png"
           smooth: true
           antialiasing: true
           layer.enabled: true
           layer.effect: DropShadow {
           }
       }


       transform: Rotation {
           id: rotation
           origin.x: flipable.width/2
           origin.y: flipable.height/2
           axis { x: 0; y: 1; z: 0 }     // set axis.y to 1 to rotate around y-axis
           angle: 0    // the default angle

       }

       states: State {
           name: "back"
           PropertyChanges { target: rotation; angle: 180 }
           when: flipable.flipped
       }

       transitions: Transition {
           NumberAnimation { target: rotation; property: "angle"; duration: 1000 ; easing.type: Easing.OutQuad}
       }

       MouseArea {
           anchors.fill: parent
           onClicked: {
               flipable.flipped = !flipable.flipped
           }
       }
    }
}