Why does the transparent color on a QQuickItem not have the same behavior as that of a Rectangle?



  • Hello, i have transparency issue on my QQuickItem, it's color doesn't have the same behaviour of a Rectangle's color for example.
    I'm on Qt 5.9.1

    This is my CustomShape :

    QSGNode *RoundedRectangle::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *data)
    {
        const auto r = m_fillColor.red();
        const auto g = m_fillColor.green();
        const auto b = m_fillColor.blue();
        const auto alpha = m_fillColor.alpha();
         if (!oldNode) {
    		node = new QSGGeometryNode;
    		geometry = new QSGGeometry(QSGGeometry::defaultAttributes_ColoredPoint2D(), nbVertice);
                    geometry->setDrawingMode(QSGGeometry::DrawTriangleStrip);
                    const auto material = new QSGVertexColorMaterial;
                    material->setFlag(QSGMaterial::Blending, true);
                    node->setGeometry(geometry);
                    node->setMaterial(material);
                    node->setFlag(QSGNode::OwnsMaterial);
    	}
    	else {
    		node = static_cast<QSGGeometryNode *>(oldNode);
    		geometry = node->geometry();
    		geometry->allocate(nbVertice);
    	}
    	auto vertices = geometry->vertexDataAsColoredPoint2D();
    //Just an exemple of setting a vertice
    	vertices[++idx].set(posX, posY, r, g, b, alpha);
            ...
           return node;
    }
    

    This is my qml file :

    RoundedRectangle {
            id:test
            anchors.top: canvas.top
            anchors.topMargin: margin
            anchors.left: canvas.left
            anchors.leftMargin: margin
            anchors.right: canvas.right
            anchors.rightMargin: margin
            height: 20
            width: 200
            borderWidth: 1
            radius: 5
            borderColor: "#C8E6C9"
            fillColor: "#501B5E20"
            antialiasing: true
        }
    
        Rectangle {
            anchors.top: test.bottom
            anchors.topMargin: margin
            anchors.left: canvas.left
            anchors.leftMargin: margin
            anchors.right: canvas.right
            anchors.rightMargin: margin
            height: 20
            width: 200
            radius: 5
            color: "#501B5E20"
        }
    

    And this is the result :
    alt text
    Same color but different result (fillcolor and color on qml)
    My item is the first rectangle of the picture. The basic rectangle is just below.

    What I did wrong?



  • @Babiole
    I found the answer, this is because QSGVertexColorMaterial interpret color as premultiplied alpha. So you have to multiply your base color by your alpha percentage.

    const auto r = m_fillColor.red() * m_fillColor.alphaF();
    const auto g = m_fillColor.green() * m_fillColor.alphaF();
    const auto b = m_fillColor.blue() * m_fillColor.alphaF();
    const auto alpha = m_fillColor.alpha();
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.