如何在 QQuickItem 中绘制文本

Posted 2023-02-16

【中文标题】如何在 QQuickItem 中绘制文本

【英文标题】：how to draw text in QQuickItem

【发布时间】：2015-04-14 15:31:00

【问题描述】：

我一直在互联网上搜索如何在 QQuickItem 上绘制或渲染文本，但无济于事。我选择不使用使用 QPainter paint() 函数的 QQuickPaintedItem。除此之外，在 ios 视网膜显示设备上还有一个已知的 QQuickPaintedItem 问题，显示模糊且边缘不清晰。

请就此提出任何可能的解决方法。

【参考方案1】：

由于 QtDeclarative 已经被弃用，我选择不使用 QQuickPaintedItem 使用 QPainter paint() 函数

这种说法没有多大意义。 QtDeclarative是QtQuick1，QQuickPaintedItem是QtQuick2模块的一部分，与QtDeclarative无关。此外，即使它使用QPainter，它仍然使用 OpenGL 进行硬件加速。

在没有QPainter 或任何其他类似类的帮助的情况下，重载自定义QQuickItem 以在其中手动绘制文本将是一项非常复杂的任务。

QQuickItem 基本上是 QML 的 Item 元素后面的类。 QML 还有一个Text 元素。 QML 专为快速 UI 开发而设计，手动绘制文本完全没有意义。你不需要任何 C++，只需要 QML：

Item 
    Text 
        text: "something"
    

看看Text元素和它的属性，你可以指定字体、颜色等等。您也可以直接将元素用作图形效果的来源。

【讨论】：

对不起，以上陈述的混淆。我已经知道 Text QML Type。但是，我想将文本渲染到形成单个 QSGNode 的每个自定义几何节点中。创建几何节点后是否可以渲染文本？与 QPainter 行为相同，您可以绘制一个矩形，然后在其上绘制文本。 TIA。

您不能将文本渲染到几何节点中。无论你想达到什么目标，我认为你走错了路。您可以手动为文本构建几何，并在几何节点中使用它，但我认为这是一个非常糟糕的主意。

谢谢@ddriver。你能给我建议和提示我应该怎么做才能在每个多边形内绘制这个sample。

@user1870074 - 你可以QQuickItem 来实现实际的“arrowy thingie”，它应该很容易做到，只需在其中放置一个 Text 元素。这样，它将更有用且更易于使用。 QML 是模块化的，一项呈现一件事，没有 QML 元素一次呈现多个特征。除非你使用QQuickPaintedItem，在这种情况下你可以使用QPainter来绘制多个特征。

如果您首先尝试使用 Text（在 QML 中）和 JS 并发现它太慢了怎么办？

【参考方案2】：

您可以使用 QPainter 像画布一样在 QImage 上绘图。然后你可以把它变成一个可以分配给 QSGSimpleTextureNode 的 QSGTexture。

这是我最近编写的代码摘录：

QColor color("steelblue");
QRect rect(0,0,aw, ah);
for(auto ch: m_charList)
    QImage canvas(rect.width(), rect.height(), QImage::Format_RGBA8888);
    canvas.fill(QColor("transparent"));
    QPainter painter(&canvas);

    QFont font = painter.font();
    //font.setPixelSize(48);
    font.setPixelSize(rect.width());
    font.setBold(true);
    painter.setFont(font);
    painter.setPen(color);

    QRect bounding = QRect(0, 0, rect.width(), rect.height());
    painter.drawText(0, 0, rect.width(), rect.height(), Qt::AlignCenter, ch, &bounding);

    QSGTexture *texture = this->window()->createTextureFromImage(canvas);
    m_textureList[ch] = texture;

上下文中包含完整工作代码的 repo 是 here。

想要这样渲染的原因有很多。您可以在 3D 空间中对 QSGNodes 进行一次旋转。