背景上的透明按钮文本

Posted 2023-02-16

【中文标题】背景上的透明按钮文本

【英文标题】：Transparent button text over the background

【发布时间】：2016-10-10 13:35:07

【问题描述】：

我正在尝试在 qml 中制作透明文本。 我有一个自定义按钮：

ApplicationWindow 
    visible: true
    width: 320
    height:240
    style: ApplicationWindowStyle 
            background: Image  // paste any url here
                source: "https://t4.ftcdn.net/jpg/01/05/18/57/240_F_105185755_w384KDBvemK5Mn4oXzrWbCz9SRvHuDIh.jpg"
            
    
    Button
    
        anchors.centerIn: parent
        style: ButtonStyle
        
            padding
            
                left: 16
                right: 16
                top: 8
                bottom: 8
            

            background:
                Rectangle
                
                    antialiasing: true
                    color: control.pressed ? "#d1d1d1" : control.hovered ? "#666" : "transparent"
                    border.color: "white"
                    radius: height/2
                    border.width: 1
                

            label:
                Text
                
                    text: "buttonText"
                    color: control.pressed ? "white" : control.hovered ? "#00000000" : "white"
                
            
        
    

我想要的只是在悬停状态的按钮中有透明文本。文本应该具有背景颜色。示例：

更新。我需要这个在没有着色器的情况下在慢速电脑上工作。

【问题讨论】：

this post可以帮到你吗？

@user2436719 我需要这个例子来在一台装有旧集成显卡的慢速电脑上工作，我的程序会有很多按钮。没有着色器有没有能力做到这一点？

@Pillar - OpenGL 中的所有内容都已使用着色器。着色器本身是微不足道的，几乎不比平面颜色着色慢。不，如果不使用着色器，您将无法在 OpenGL 中做任何事情。 QML 使用 OpenGL。无论哪种方式，您最终都会使用着色器。

TL;DR：如果您使用的是 Qt Quick，那么您已经在使用着色器了。着色器在速度较慢的 PC 上使其速度更快，因为它们专门用于非常快速执行这种重复处理 - 至少比 CPU 可以执行的速度快一个数量级。

【参考方案1】：

一种选择是使用自定义QQuickPaintedItem 并使用QPainterPath 来绘制“文本形状的孔”。

基本上是这样的

void MyItem::paint(QPainter *painter)

    QPainterPath path;
    path.addRect(0, 0, width(), height());
    path.addText(textX, textY, font, yourText);

    painter->setBrush(yourBackgroundColor);
    painter->setPen(Qt::transparent);
    painter->drawPath(path);

恐怕必须手动计算位置，即textX 和textY，尽管QFontMetrics::boundingRect() 应该会有所帮助。