[Interest] Improve Sharpness of Qml Text Item text rendering

[Nuno Santos]

Shawn,

Sorry, I should have sent you the output of my test. 


On the Image below, the knobs labels are using NativeRendering (OCTAVE & FINE)

If you compare them agains WAVEFORM and SEMITONE, you will notice them more crisp.

I will try the code you sent me!

Thx!

Regards,

Nuno





> On 25 Oct 2017, at 13:22, Shawn Rutledge <Shawn.Rutledge at qt.io> wrote:
> 
> 
>> 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.
> 
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20171025/321ac241/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2017-10-25 at 15.31.32.png
Type: image/png
Size: 47121 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20171025/321ac241/attachment.png>