如何在qml中创建一个预期的图像

时间:2016-12-19 11:15:30

标签: qt rotation qml mask

我正在尝试从正常图像创建感知图像 我需要这样的东西 Resultant image

来自此类

Source image

我尝试了不同的方式,如旋转和使用这样的面具

 Image {
        id: bug
        source: "./Graphics/sample.png"
        width: 200
        height: 200
        anchors.centerIn: parent
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
       transform: Rotation { origin.x: 30; origin.y: 30; axis { x: 0; y: 1; z: 0 } angle: 46 }
        visible: true




        layer.enabled: true
        layer.effect: OpacityMask {

            maskSource:

                    Image {
                        id: mask
                        source: "./mask.png"
                        sourceSize: Qt.size(parent.width, parent.height)
                        smooth: true
                        visible: false
                    }



         }
    }

是否有任何正确的方法来实际创建这样的效果。

Mask Image

1 个答案:

答案 0 :(得分:2)

我不确定,如果我做对了,但是这样的话,你想要实现吗?

Item {
    width: 1000
    height: 500

    anchors.centerIn: parent
    RectangularGlow {
        id: effect
        anchors.fill: img
        glowRadius: 25
        spread: 0.2
        color: "black"
        cornerRadius: 50
    }

    Image {
        id: img
        anchors.centerIn: parent
        width: 1000
        height: 500
        source: 'source.png'


        layer.enabled: true
        layer.effect: OpacityMask {

            maskSource: Rectangle {
                width: 1000
                height: 500
                radius: 25
            }
        }
    }
    transform: Rotation {  axis {x: 0.5; y: 1; z: 0} angle: 45 }
}

或者可能是DropShadow你要申请,而不是 RectangularGlow

DropShadow {
    anchors.fill: img
    horizontalOffset: -15
    verticalOffset: 8
    radius: 20
    samples: 40
    color: "#80000000"
    source: Rectangle {
        width: 1000
        height: 500
        radius: 25
    }
}