[Interest] Improve Sharpness of Qml Text Item text rendering

[Shawn Rutledge]

> On 25 Oct 2017, at 11:54, Nuno Santos <nunosantos at imaginando.pt> wrote:
> 
> Shawn,
> 
> Thanks for your reply.
> 
> It actually got worst with this setting.

In what way?

The downside of native text is that it’s a bit less efficient, and is rendered exactly at the declared font size, so transforms such as scaling and rotation look terrible.  We don’t use it by default because QtQuick is for fluid applications, but static text looks “more native” with NativeRendering.

Here’s a little torture-test you can try (with the qml runtime):

import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1

Rectangle {
    width: 900
    height: 480

    GridLayout {
        width: parent.width
        columns: 3
        flow: GridLayout.TopToBottom

        Repeater {
            model: 10
            Text {
                text: "default rendering"
                font.pixelSize: sizeSlider.value * (index + 1)
                transformOrigin: Item.TopLeft
                scale: scaleSlider.value
                rotation: rotationSlider.value
            }
        }

        Repeater {
            id: nrRepeater
            model: 10
            Text {
                renderType: Text.NativeRendering
                text: "native rendering"
                font.pixelSize: sizeSlider.value * (index + 1)
                Layout.column: 1
                Layout.row: index
                transformOrigin: Item.TopLeft
                scale: scaleSlider.value
                rotation: rotationSlider.value
            }
        }

        Repeater {
            model: 10
            Canvas {
                width: 300
                height: fontSize
                property real fontSize: sizeSlider.value * (index + 1)
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.clearRect(0, 0, width, height);
                    ctx.fillStyle = Qt.rgba(0, 0, 0, 1);
                    ctx.font = fontSize + 'px Helvetica';
                    ctx.textBaseline = 'top';
                    console.log("painting " + index + " , height " + height + " font " + ctx.font + " based on " + sizeSlider.value)
                    ctx.fillText('canvas rendering', 0, 0);
                }
                Layout.column: 2
                Layout.row: index
                transformOrigin: Item.TopLeft
                scale: scaleSlider.value
                rotation: rotationSlider.value
            }
        }
        SequentialAnimation on y {
            id: jumper
            running: cbAnimate.checked
            loops: Animation.Infinite
            NumberAnimation { from: 0; to: amplitudeSlider.value }
            NumberAnimation { to: 0; from: amplitudeSlider.value }
        }
    }

    Column {
        anchors.bottom: parent.bottom
        Row {
            spacing: 6
            Text { text: "Pixel size"; anchors.verticalCenter: parent.verticalCenter }
            Slider { id: sizeSlider; from: 2; to: 5 }
            CheckBox { id: cbAnimate; text: "Jumpy"; checked: true }
            Slider { id: amplitudeSlider; from: 1; to: 10; value: 1; onValueChanged: jumper.restart() }
        }
        Row {
            spacing: 6
            Text { text: "Scale"; anchors.verticalCenter: parent.verticalCenter }
            Slider { id: scaleSlider; from: 0.5; to: 2; value: 1 }
            Text { text: "Rotation"; anchors.verticalCenter: parent.verticalCenter }
            Slider { id: rotationSlider; from: -10; to: 10; value: 0 }
            Button { text: "Reset"; onClicked: { scaleSlider.value = 1; rotationSlider.value = 0 } }
        }
    }
}

> So I assume there aren’t any other alternatives.

There’s some work in progress toward rendering with contours eventually: https://bugreports.qt.io/browse/QTBUG-61933 but that’s intended for larger text sizes.

You could try using QPainter (make a custom C++ Item which renders words to textures and then creates QSGImageNodes for them), but I think that would look about the same as native text.