2

QML and c++ code use the same font.

QML:

TextEdit {  
        ...                  
        font: settings.font // font.preferShaping = false doesn't help
        ...
        renderType: Text.QtRendering // Text.NativeRendering also doesn't paint correctly
    }

letters (corners are rounded):

enter image description here

C++:

QSGNode* Text::updatePaintNode(QSGNode* oldNode, QQuickItem::UpdatePaintNodeData*)
{
    ...
    QImage image(QSize(size, QImage::Format_ARGB32_Premultiplied);
    QPainter painter(&image);
    //painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing | QPainter::SmoothPixmapTransform); doesn't help also
    image.fill(QColor(0, 0, 0, 0));
    painter.setFont(settings.font());
    painter.drawText(rect, alignment(), text));
    ...
}

letters (sharp corners):

enter image description here

Update: the code below also doesn't fix the corners in QML:

font.family: "Segoe UI"
font.pixelSize: 15
font.preferShaping: false

How can I synchronize looking of the fonts between QML and c++ ?

Windows 10, tested on Qt 5.15.8 msvc2019 & Qt 6.5.0 msvc2019
Reproducible example:

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 640
    visible: true

    Rectangle {
        id: rect
        color: "#303030"
        width: textEdit.contentWidth
        height: textEdit.contentHeight

        TextEdit {
            id: textEdit
            color: "yellow"
            font.family: "Segoe UI"
            font.pointSize: 300
            font.preferShaping: false
            text: "Й"
        }
    }
}

result (rounded corners):

enter image description here

Vladimir Bershov
  • 2,701
  • 2
  • 21
  • 51
  • 1
    Is this true only for that particular font? Or does the same thing happen with all fonts? – JarMan Apr 27 '23 at 14:26
  • 2
    What is your OS? If you're on Windows, have you tried to add `-platform windows:fontengine=freetype` to your command line? – Atmo Apr 27 '23 at 15:13
  • 1
    @JarMan it is true for all the fonts – Vladimir Bershov Apr 27 '23 at 18:39
  • 1
    @Atmo OS Win 10 x64. `-platform windows:fontengine=freetype` doesn't help too – Vladimir Bershov Apr 27 '23 at 18:45
  • `font: settings.font` does not work. I mentioned this problem in another of your questions. One sure way of creating a font object in QML is is using https://doc.qt.io/qt-6/qml-qtqml-qt.html#font-method – Stephen Quan Apr 28 '23 at 09:01
  • thanks, but the line `font: Qt.font({ pixelSize: getFont().pixelSize, family: getFont().family, preferShaping: false })` also doesn't fix the issue – Vladimir Bershov Apr 28 '23 at 11:11
  • 2
    So I've tested it on Windows and Linux (Qt 6.5) with `Text.NativeRendering` and it doesn't draw rounded corners as with`Text.QtRendering`. What do you mean by native rendering doesn't paint correctly? – iam_peter Apr 28 '23 at 14:31
  • 1
    For what it's worth I reproed the OP's question with `TextEdit { font.family: "Segoe UI"; font.pixelSize: 450; text: "ON"; color: "yellow" }` and like @iam_peter observed, using `Text.NativeRendering` doesn't draw rounded corners as with `Text.QtRendering`. According to the documentation, you may wish to use `renderType: Text.NativeRendering` in combination with `font.hintingPreference`. – Stephen Quan Apr 29 '23 at 11:03
  • 1
    Please show the result of using `Text.NativeRendering`. – iam_peter May 07 '23 at 22:21
  • 1
    If you use `Text`, there is also a `renderTypeQuality` option available to fix issues with glyph quality. However, in `TextEdit`, this option does not exist, and it appears that you must continue using the default quality. Additionally, I have encountered issues with `QtRendering`, and `NativeRendering` does not display anything for point sizes greater than 220 (in my experience). – SMR May 08 '23 at 03:27
  • 1
    To complete my last comment, the `QQuickTextNode` is responsible for painting glyphs. Its private member, `m_renderTypeQuality`, has a default hardcoded value of `-1` [[1](https://github.com/qt/qtdeclarative/blob/dev/src/quick/items/qquicktextnode.cpp#L36)]. Setting other values is only possible using the [setRenderTypeQuality](https://github.com/qt/qtdeclarative/blob/dev/src/quick/items/qquicktextnode_p.h#L75) function, which is not used in `TextEdit` [[2](https://github.com/qt/qtdeclarative/blob/dev/src/quick/items/qquicktextedit.cpp)]. – SMR May 08 '23 at 04:09
  • Do you have any graphic card? – Parisa.H.R May 09 '23 at 10:32
  • 1
    @Parisa.H.R yes I have GeForce GTX 750 – Vladimir Bershov May 09 '23 at 18:46

1 Answers1

0

You can antialias the TextEdit text in QML by using the renderType property.

Setting the renderType to TextEdit.NativeRendering enables antialiasing on the text, which smooths out the edges of the characters.

I just add renderType: TextEdit.NativeRendering to your qml code :

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 640
    visible: true

    Rectangle {
        id: rect
        color: "#303030"
        width: textEdit.contentWidth
        height: textEdit.contentHeight

        TextEdit {
            id: textEdit
            color: "yellow"
            font.family: "Segoe UI"
            font.pointSize: 300
            font.preferShaping: false
            renderType: TextEdit.NativeRendering
            text: "Й"
        }
    }
}

Here is its Result:

enter image description here

Parisa.H.R
  • 3,303
  • 3
  • 19
  • 38
  • 1
    OP used `NativeRendering`, and it did not help: (_renderType: Text.QtRendering // Text.NativeRendering also doesn't paint correctly_). `NativeRendering` depends on the platform, you're on Ubuntu, OP's on Windows. – Abderrahmene Rayene Mihoub May 09 '23 at 09:10
  • 2
    I've also tested `NativeRendering` on windows and ubuntu and it worked the same. OP didn't really clarify what they meant by "doesn't paint correctly"... – iam_peter May 09 '23 at 09:11
  • @MihoubAbderrahmeneRayene but it will change for me , maybe this relates to graphic cards, I test in fedora 38 and Qt 6.5 and Nvidia GPU.antialiasing is dependent on the operating system and hardware, so the results may vary across different devices – Parisa.H.R May 09 '23 at 10:15
  • @iam_peter I think it's not smooth in Second Picture and he wants what he draws with paint in c++. But do you have graphic card? And what was your results in both os ? Was it smooth? – Parisa.H.R May 09 '23 at 10:21
  • I think, "antialias" isn't quite the right word here because the rendered glyph itself is already antialiased. It just appears deformed due to the optimization of the glyph shape. – SMR May 11 '23 at 03:38
  • 1
    @SMR well I mean it will smooth by TextEdit.NativeRendering as I show in picture. Unfortunately I don't have windows os right now but I will test there as soon as I can. I just wanted to show OP that it works as he said "Text.NativeRendering also doesn't paint correctly" and maybe that issue relates to his OS. – Parisa.H.R May 11 '23 at 12:43
  • 1
    It has already been tested on Windows, and it works as well. – Abderrahmene Rayene Mihoub May 11 '23 at 12:55