[Interest] making 'hole' in the rectangle

[Brian Dentino]

You might also try experimenting with OpacityMask, if you can afford to be a little flexible with your item hierarchy

import QtQuick 2.2
import QtGraphicalEffects 1.0

Item {
    id: root

    width: 360
    height: 360

    Rectangle {
        id: background

        anchors.fill: parent
        color: 'blue'
        Rectangle {
            id: test

            width: 60
            height: 60

            SequentialAnimation {
                id: moveRect
                NumberAnimation { target: test; properties: 'x,y'; from: 0; to: 300; duration: 10000 }
                NumberAnimation { target: test; properties: 'x,y'; from: 300; to: 0; duration: 10000 }
                loops: Animation.Infinite
            }
            Component.onCompleted: moveRect.start()
        }
    }

    Rectangle {
        id: redRect
        anchors.centerIn: parent
        anchors.horizontalCenterOffset: 70
        width: parent.width / 2
        height: parent.height / 2
        color: 'red'
        opacity: 0.5
    }

    Rectangle {
        id: hole
        anchors.centerIn: redRect
        width: parent.width / 4
        height: parent.height / 4
        clip: true
        OpacityMask {
            id: mask
            source: background
            maskSource: hole
            width: background.width
            height: background.height
            Component.onCompleted: {
                x = -mapToItem(background, 0, 0).x
                y = -mapToItem(background, 0, 0).y
            }
        }
    }
}


On Jul 25, 2014, at 12:45 AM, BOUCARD Olivier <boucard_olivier at yahoo.fr> wrote:

> I would try something like building a new Item with 4 Rectangle as children which you arrange to create a hole in the middle.
> 
> Olivier
> 
> 
> Le Jeudi 24 juillet 2014 23h56, Alexander Ivash <elderorb at gmail.com> a écrit :
> 
> 
> Is it possible to implement a 'hole' component which would make color of its parent control transparent? For example: 
> 
> Rectangle {
>     width: 100
>     height: 100
> 
>     color: 'blue'
> 
>     Rectangle {
>         width: 50
>         height: 50
> 
>         color: 'green'
> 
>         Hole {
>            anchors.fill: parent
>             width: 25
>             height: 50
>         }
>     }
> }
> 
> Expected result: area 100x100, filled with blue and 25x50 (not 50x50 as we erased half of area with 'Hole') area of green on top. 
> 
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
> 
> 
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20140725/64caa4a1/attachment.html>