QImage上的格式化大纲文本

Question

如何使用自动换行，对齐等在QImage上绘制大纲文本？

我尝试了QPainterPath::addText()方法，但它不支持自动换行和对齐。

这就是我现在绘制文字的方式：

path.addText(rect.bottomLeft(), font, text);
p.strokePath(path, pen);
p.drawText(rect, flag, text);

，其中

• p - QPainter
• rect - 包含文字的矩形
• flag - Qt::AlignRight，Qt::TextWordWrap

但它看起来像这样

Answer 1

QPainter不支持此功能，QPainterPath也不支持。

您可以使用QGraphicsScene代替。如果您真的需要创建QImage，则可以始终使用其render()函数执行此操作。

要在图形场景中实现此效果，您需要QGraphicsTextItem和QTextCharFormat。 轮廓绘制在实际文本的顶部，对于任何比1更粗的轮廓看起来都是完整的废话。因此，您必须在第一个之上添加另一个没有轮廓的QGraphicsTextItem。

这是一个完整的运行示例。请注意，我们可以指定文本的宽度，但不能指定高度，您可能会通过剪切来指定。

#include <QApplication>
#include <QGraphicsScene>
#include <QGraphicsTextItem>
#include <QLabel>
#include <QPainter>
#include <QTextCharFormat>
#include <QTextCursor>
#include <QTextDocument>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QString text = "lorem ipsum dolor sit amet";
    QFont font("Arial", 30);
    QRect rect(100, 100, 300, 0);

    QImage img(500, 500, QImage::Format_RGB32);
    img.fill(0x00ffffff);
    {
        QPainter p(&img);

        QGraphicsScene scene(img.rect());

        QTextCharFormat charFormat;
        charFormat.setFont(font);
        charFormat.setTextOutline(QPen(Qt::red, 5, Qt::SolidLine));

        QTextDocument document;
        QTextCursor cursor = QTextCursor(&document);
        cursor.insertText(text, charFormat);

        QGraphicsTextItem outlineTextItem;
        outlineTextItem.setPos(rect.topLeft());
        outlineTextItem.setDocument(&document);
        outlineTextItem.setTextWidth(rect.width());
        scene.addItem(&outlineTextItem);

        QGraphicsTextItem textItem(text);
        textItem.setPos(rect.topLeft());
        textItem.setTextWidth(rect.width());
        textItem.setFont(font);
        scene.addItem(&textItem);

        scene.render(&p);
    }

    QLabel label;
    label.setPixmap(QPixmap::fromImage(std::move(img)));
    label.show();

    return a.exec();
}

Answer 2

我找到了这个解决方案：我在缓冲区中绘制文本（使用QPainter.drawText），计算SDF，并制作轮廓。

https://en.wikipedia.org/wiki/Signed_distance_function

https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817