OpacityMask on Android

Question

I have problems with OpacityMask on Android. If another Image is set behind OpacityMask, you will see black rectangle. Here is a minimum example:

import QtQuick 2.5
import QtQuick.Controls 1.2
import QtGraphicalEffects 1.0

Item {
    Image {
        anchors.fill: parent
        source: "qrc:/images/background.png"
    }

    Image {
        id: avatarImage
        source: "qrc:/images/avatar_test.png"
        visible: false
        // width: 128
        // height: 128
    }

    Image {
        id: avatarImageMask
        source: "qrc:/images/avatar_mask.png"
        visible: false
        // width: 128
        // height: 128
    }

    OpacityMask {
        source: avatarImage
        maskSource: avatarImageMask
        anchors.fill: avatarImage
    }
}

All the *.png files has 128x128 in resolution.

Is there a solution to this problem or am I doing something wrong?

Answer 1

Setting mipmap to true on the background Image solved the issue for me. Here is a minimum example code:

import QtQuick 2.5
import QtQuick.Controls 1.2
import QtGraphicalEffects 1.0

Item {
    Image {
        mipmap: true // <-- for some cost of performance, but mask will work
        anchors.fill: parent
        source: "qrc:/images/background.png"
    }

    Image {
        id: avatarImage
        source: "qrc:/images/avatar_test.png"
        visible: false
        // width: 128
        // height: 128
    }

    Image {
        id: avatarImageMask
        source: "qrc:/images/avatar_mask.png"
        visible: false
        // width: 128
        // height: 128
    }

    OpacityMask {
        source: avatarImage
        maskSource: avatarImageMask
        anchors.fill: avatarImage
    }
}