QLabel正确定位文本轮廓

问题描述

我正在尝试创建带有文本轮廓的标签。我只想要一个带有黑色轮廓的简单白色文本。我首先尝试在label.setStyleSheet("color:white; outline:2px black;")这样的CSS中做到这一点
但是大纲什么也没做。

我做了很多搜索,并找到了用qpainter path做到这一点的方法。但是问题在于文本总是被截断。

enter image description here

根据该功能,该文本应该从左下角开始,但是从左下角开始。我知道我可以通过尝试错误找到一个要点,这样它就不会被切断-您可以将-20调高到这个高度,这样就足够了。但这只会修复此特定文本!对于具有不同大小,文本或字体的任何标签,它都是相同的。

我将在此处放置最小代码示例

from PyQt5 import QtCore,QtGui,QtWidgets
from PyQt5.QtWidgets import QWidget,QLabel,QMainWindow


class MainLabel(QLabel):
    def __init__(self,text):
        super(MainLabel,self).__init__(text)

    def paintEvent(self,event):
        qp = QtGui.QPainter()
        qp.begin(self)
        qp.setRenderHint(QtGui.QPainter.Antialiasing)
        font=QtGui.QFont()
        font.setPointSize(70)
        painterPath = QtGui.QPainterPath()
        #how to get the right positioning for addText
        painterPath.addText(0,self.height(),font,self.text())#HERE
        qp.strokePath(painterPath,QtGui.QPen(QtGui.QColor(0,0),6))
        qp.fillPath(painterPath,QtGui.QColor(255,255,255))
        qp.end()


class MainWindow(QMainWindow):
    def __init__(self):
        super(MainWindow,self).__init__()
        self.centralWidget=QWidget(self)
        self.setCentralWidget(self.centralWidget)
        self.lay = QtWidgets.QVBoxLayout()
        self.centralWidget.setLayout(self.lay)
        self.label = MainLabel("text gets cut off")
        self.label.setStyleSheet("font-size:70pt;color:white; outline:2px black;")
        self.lay.addWidget(self.label)
        self.show()


if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    w = MainWindow()
    sys.exit(app.exec_())

这是很普通的事情,我几乎可以在任何地方看到它,但是在PYQT中没有简单的功能而不引起更多问题吗?因此,普通的Qlabel将自动处理定位,但是如果您想要文本轮廓,则必须放弃!

因此,我想问问如何找到像普通Qlabel一样的正确位置,如果这是唯一显示文本轮廓的方法,否则,请告诉我其他方法

解决方法

仅仅因为没有便捷的功能或样式表属性并不意味着没有一致的解决方案!

要设置文本的基线位置,需要考虑许多属性:QLabel的几何形状,文本的boundingRect,对齐方式,缩进量,字体规格。总的来说,概述的文本将比相同磅值的常规文本大,因此sizeHintminimumSizeHint被重新实现以解决该问题。该文档介绍了indent的计算方法和对齐方式。文本和字符的几何形状,上升,下降和方位均从QFontMetrics获得。利用此信息,可以确定QPainterPath.addText的位置,以模拟QLabel。

import sys,math
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
        
class OutlinedLabel(QLabel):
    
    def __init__(self,*args,**kwargs):
        super().__init__(*args,**kwargs)
        self.w = 1 / 25
        self.mode = True
        self.setBrush(Qt.white)
        self.setPen(Qt.black)

    def scaledOutlineMode(self):
        return self.mode

    def setScaledOutlineMode(self,state):
        self.mode = state

    def outlineThickness(self):
        return self.w * self.font().pointSize() if self.mode else self.w

    def setOutlineThickness(self,value):
        self.w = value

    def setBrush(self,brush):
        if not isinstance(brush,QBrush):
            brush = QBrush(brush)
        self.brush = brush

    def setPen(self,pen):
        if not isinstance(pen,QPen):
            pen = QPen(pen)
        pen.setJoinStyle(Qt.RoundJoin)
        self.pen = pen

    def sizeHint(self):
        w = math.ceil(self.outlineThickness() * 2)
        return super().sizeHint() + QSize(w,w)
    
    def minimumSizeHint(self):
        w = math.ceil(self.outlineThickness() * 2)
        return super().minimumSizeHint() + QSize(w,w)
    
    def paintEvent(self,event):
        w = self.outlineThickness()
        rect = self.rect()
        metrics = QFontMetrics(self.font())
        tr = metrics.boundingRect(self.text()).adjusted(0,w,w)
        if self.indent() == -1:
            if self.frameWidth():
                indent = (metrics.boundingRect('x').width() + w * 2) / 2
            else:
                indent = w
        else:
            indent = self.indent()

        if self.alignment() & Qt.AlignLeft:
            x = rect.left() + indent - min(metrics.leftBearing(self.text()[0]),0)
        elif self.alignment() & Qt.AlignRight:
            x = rect.x() + rect.width() - indent - tr.width()
        else:
            x = (rect.width() - tr.width()) / 2
            
        if self.alignment() & Qt.AlignTop:
            y = rect.top() + indent + metrics.ascent()
        elif self.alignment() & Qt.AlignBottom:
            y = rect.y() + rect.height() - indent - metrics.descent()
        else:
            y = (rect.height() + metrics.ascent() - metrics.descent()) / 2

        path = QPainterPath()
        path.addText(x,y,self.font(),self.text())
        qp = QPainter(self)
        qp.setRenderHint(QPainter.Antialiasing)

        self.pen.setWidthF(w * 2)
        qp.strokePath(path,self.pen)
        if 1 < self.brush.style() < 15:
            qp.fillPath(path,self.palette().window())
        qp.fillPath(path,self.brush)

您可以使用OutlinedLabelsetBrush设置setPen填充和轮廓颜色。默认值为带有黑色轮廓的白色文本。轮廓线的粗细取决于字体的磅值,默认比例为1/25(即25pt字体的轮廓线粗细为1px)。使用setOutlineThickness进行更改。如果您要基于点大小(例如3px)的固定轮廓,请调用setScaledOutlineMode(False)setOutlineThickness(3)

此类仅支持单行纯文本字符串,其左/右/上/下/中心对齐。如果您需要其他QLabel功能,例如超链接,自动换行,省略的文本等,则这些功能也需要实现。但是,在这种情况下,您可能不会使用文本轮廓。

下面是一个示例,说明它可以用于各种标签:

enter image description here

class Template(QWidget):

    def __init__(self):
        super().__init__()
        vbox = QVBoxLayout(self)
        label = OutlinedLabel('Lorem ipsum dolor sit amet consectetur adipiscing elit,')
        label.setStyleSheet('font-family: Monaco; font-size: 20pt')
        vbox.addWidget(label)

        label = OutlinedLabel('sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')
        label.setStyleSheet('font-family: Helvetica; font-size: 30pt; font-weight: bold')
        vbox.addWidget(label)

        label = OutlinedLabel('Ut enim ad minim veniam,',alignment=Qt.AlignCenter)
        label.setStyleSheet('font-family: Comic Sans MS; font-size: 40pt')
        vbox.addWidget(label)

        label = OutlinedLabel('quis nostrud exercitation ullamco laboris nisi ut')
        label.setStyleSheet('font-family: Arial; font-size: 50pt; font-style: italic')
        vbox.addWidget(label)

        label = OutlinedLabel('aliquip ex ea commodo consequat.')
        label.setStyleSheet('font-family: American Typewriter; font-size: 60pt')
        label.setPen(Qt.red)
        vbox.addWidget(label)

        label = OutlinedLabel('Duis aute irure dolor',alignment=Qt.AlignRight)
        label.setStyleSheet('font-family: Luminari; font-size: 70pt')
        label.setPen(Qt.red); label.setBrush(Qt.black)
        vbox.addWidget(label)

        label = OutlinedLabel('in reprehenderit')
        label.setStyleSheet('font-family: Zapfino; font-size: 80pt')
        label.setBrush(Qt.red)
        vbox.addWidget(label)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = Template()
    window.show()
    sys.exit(app.exec_())

现在Qt实际上是最重要的,因为您可以从所有QBrush / QPen选项中获得的不仅仅是纯色文本和轮廓,而且还有更多的东西

enter image description here

class Template(QWidget):

    def __init__(self):
        super().__init__()                                          
        vbox = QVBoxLayout(self)
        text = 'Felicitations'
        
        label = OutlinedLabel(text)
        linearGrad = QLinearGradient(0,1,0)
        linearGrad.setCoordinateMode(QGradient.ObjectBoundingMode)
        linearGrad.setColorAt(0,QColor('#0fd850'))
        linearGrad.setColorAt(1,QColor('#f9f047'))
        label.setBrush(linearGrad)
        label.setPen(Qt.darkGreen)
        vbox.addWidget(label)

        label = OutlinedLabel(text)
        radialGrad = QRadialGradient(0.3,0.7,0.05)
        radialGrad.setCoordinateMode(QGradient.ObjectBoundingMode)
        radialGrad.setSpread(QGradient.ReflectSpread)
        radialGrad.setColorAt(0,QColor('#0250c5'))
        radialGrad.setColorAt(1,QColor('#2575fc'))
        label.setBrush(radialGrad)
        label.setPen(QColor('Navy'))
        vbox.addWidget(label)
        
        label = OutlinedLabel(text)
        linearGrad.setStart(0,0); linearGrad.setFinalStop(1,0)
        linearGrad.setColorAt(0,Qt.cyan); linearGrad.setColorAt(1,Qt.magenta)
        label.setPen(QPen(linearGrad,1)) # pen width is ignored
        vbox.addWidget(label)

        label = OutlinedLabel(text)
        linearGrad.setFinalStop(1,1)
        for x in [(0,'#231557'),(0.29,'#44107A'),(0.67,'#FF1361'),(1,'#FFF800')]:
            linearGrad.setColorAt(x[0],QColor(x[1]))
        label.setBrush(linearGrad)
        label.setPen(QPen(QBrush(QColor('RoyalBlue'),Qt.Dense4Pattern),1))
        label.setOutlineThickness(1 / 15)
        vbox.addWidget(label)

        label = OutlinedLabel(text)
        label.setBrush(QBrush(Qt.darkBlue,Qt.BDiagPattern))
        label.setPen(Qt.darkGray)
        vbox.addWidget(label)

        label = OutlinedLabel(text,styleSheet='background-color: black')
        label.setBrush(QPixmap('paint.jpg'))
        label.setPen(QColor('Lavender'))
        vbox.addWidget(label)
        
        self.setStyleSheet('''
        OutlinedLabel {
            font-family: Ubuntu;
            font-size: 60pt;
            font-weight: bold;
        }''')


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = Template()
    window.show()
    sys.exit(app.exec_())

请注意,我已选择使用setBrush / setPen方法将OutlinedLabel视为QGraphicsItem。如果您想将样式表用于文本颜色,请使用qp.fillPath(path,self.palette().text())

填充路径

另一种选择是使用QPainterPathStroker生成文本路径的可填充轮廓,而不是先调用QPainter.strokePath然后调用QPainter.fillPath,但我注意到它的速度较慢。我只会用它来设置笔触的宽度(比笔宽)来调整非常小的文本的清晰度。要尝试使用以下方法替换paintEvent中的最后5行:

qp.setBrush(self.brush)
self.pen.setWidthF(w)
qp.setPen(self.pen)
stroker = QPainterPathStroker()
stroker.setWidth(w)
qp.drawPath(stroker.createStroke(path).united(path))