CODEWITHSUNDEEP
qtqml
SourabhKus
SourabhKus

Reputation: 828

Transparent QImage on QSGTexture

I am using Qt5.8 on Windows. I have created a QQucikItem which i am rendering on QML. In updatePaintNode function i am creating a QImage(which have some transparent part) as finalImage 

QSGSimpleTextureNode *node = 0;
QSGTexture *texture;        
node = static_cast<QSGSimpleTextureNode *>(oldNode);
if (!node) {
    node = new QSGSimpleTextureNode();
}

texture = window()->createTextureFromImage(finalImage);
node->setTexture(texture);
node->setRect(boundingRect());
node->markDirty(QSGNode::DirtyForceUpdate);
return node;

so in qml transparent part is becoming black instead of transparent

Upvotes: 0

Views: 1630

Answers (2)

SourabhKus
SourabhKus

Reputation: 828

I was creating QImage using RGB32 instead of ARGB32 format.

Upvotes: -1

folibis
folibis

Reputation: 12854

I don't know what are you doing but black background means that image isn't loaded. Usually it's wrong path or something like that. Or may be the image corrupted. You can only fill background intentionally, by default it's transparent.

For example this code:

C++:

TestItem::TestItem(QQuickItem *parent)
    :QQuickItem(parent)
{
    setFlag(QQuickItem::ItemHasContents);
}

QSGNode *TestItem::updatePaintNode(QSGNode *oldNode, QQuickItem::UpdatePaintNodeData *updatePaintNodeData)
{
    QSGSimpleTextureNode *node = static_cast<QSGSimpleTextureNode *>(oldNode);
    if (!node) {
        node = new QSGSimpleTextureNode();
        QImage img(":/sunflower.png");
        QSGTexture *texture = window()->createTextureFromImage(img);
        node->setTexture(texture);
    }
    node->setRect(boundingRect());
    return node;
}

QML

import QtQuick 2.7
import QtQuick.Window 2.0
import qml.test 1.0
import QtGraphicalEffects 1.0

Window {
    id: mainWindow
    width: 600
    height: 400
    visible: true

    LinearGradient {
        anchors.fill: parent
        start: Qt.point(0, 0)
        end: Qt.point(0, 200)
        gradient: Gradient {
            GradientStop { position: 0.0; color: "lightblue" }
            GradientStop { position: 1.0; color: "white" }
        }
    }

    TestItem {
        width: 200
        height: 200
        anchors.centerIn: parent
    }
}

produces this result:

enter image description here

The image was taken from here, resized to 200x200 with GIMP. The project structure is like this:

enter image description here

Upvotes: 4

Related Questions