George Thomas
George Thomas

Reputation: 4586

How to create a prespective image in qml

I am trying to create perceptive image from a normal image I need something like this Resultant image

from something like this

Source image

I tried different ways like rotate and use a mask like this

 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
                    }



         }
    }

Is there any proper way to actually create an effect like this.

Mask Image

Upvotes: 2

Views: 221

Answers (1)

derM
derM

Reputation: 13701

I am not sure, if I got it right, but is it something like this, you want to achive?

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

Or maybe it is a DropShadow you want to apply, instead of the RectangularGlow

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

Upvotes: 2

Related Questions