QML 中的字体拉伸答案

【问题标题】：Font stretching in QMLQML 中的字体拉伸
【发布时间】：2019-03-26 01:48:41
【问题描述】：

我们正在转换一些较旧的 QT 小部件代码以使用 QML，但我找不到 QFont::setStretch() 操作的等效属性。

QML Font page 仅显示family、粗体、斜体、下划线、pointSize、pixelSize、粗细、上划线、删除线、大写、letterSpacing、wordSpacing、kerning、preferShaping 和hintingPreference。

这个字体选择是在 Text 对象内完成的，如下所示：

Text {
    font.family: "LiberationSans"
    font.pixelSize: 178
    font.weight: 80
    //font.stretch: 75 - doesn't work, no such property
}

有没有办法在 QML 中设置拉伸因子。顺便说一下，我们使用的是 Qt 5.6。

【问题讨论】：

标签： qt fonts qml qt5 stretch

【解决方案1】：

不幸的是，这个属性没有暴露给 QML，一个可能的解决方案是使用一个接收 QFont 的辅助类，更改拉伸并返回新的 QFont。

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QFont>

class FontHelper: public QObject{
    Q_OBJECT
public:
    using QObject::QObject;
    Q_INVOKABLE QFont changeStretchFont(const QFont & font, int factor){
        QFont fn(font);
        fn.setStretch(factor);
        return fn;
    }
};

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    FontHelper helper;
    engine.rootContext()->setContextProperty("fontHelper", &helper);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

#include "main.moc"

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Text {
        id: txt
        font.family: "Helvetica"
        font.pointSize: 13
        font.bold: true
        text: "hello World"
        Component.onCompleted: txt.font = fontHelper.changeStretchFont(txt.font, 200)
    }
}

【讨论】：

嗯，当我使用这种方法时会发生一些奇怪的事情。看起来字符保持相同的宽度，但它们被严重压缩。例如，单词 PAX 只会比 P 宽一点，但 A 开头大约是 P 的四分之一。
@paxdiablo 在 Qt 5.12.2 中我没有观察到这个问题，因为它显示了以下图像：imgur.com/a/xa56SVc，可能是您使用的 Qt 版本的错误
我不认为这是版本的错误，相同的版本被用于字体宽度可以缩放的 Widget 变体。但是，我没有像您举的例子那样简单的情况，我们实际上构建了所有 QML 元素，然后我们稍后更改字体细节。因此，Text 控件中提供了一个函数来更改字体细节。可能是我做错了什么，我需要调查一下。
@paxdiablo mmm，看起来很奇怪，你可以给我看一下错误的图片，如果你提供一个 MCVE，也许它可以帮助你分析问题
我会努力在第二天左右完成一个尽可能短的版本，我们现在有点紧张，所以决定使用全角字体。由于您的回答确实实际上影响了宽度（这是一个值得学习的巧妙技巧），我会接受这个作为答案。

【解决方案2】：

试试这个：

Text {
    font.family: "LiberationSans"
    font.pixelSize: 178
    font.weight: 80
    transform: Scale { xScale: 0.75}
    //font.stretch: 75 - doesn't work, no such property
}

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。