2d 上下文中的字体缩放

Posted 2023-02-16

【中文标题】2d 上下文中的字体缩放

【英文标题】：Font scaling in 2d context

【发布时间】：2018-07-17 19:22:44

【问题描述】：

到目前为止，我已经像这样处理我的 Text 对象：

FontLoader

    id: roboFont;
    source: "qrc:/fonts/RobotoCondensed-Regular.ttf";

...

示例用法，而非 MWE：

Text

    id: theTitle;
    font.pointSize: fontSizeTitle * scale;
    color: col;
    font.family: roboFont.name;
    y: yOffsetTitle * scale;
    font.letterSpacing: fontSpacingTitle * scale;
    anchors.horizontalCenter: parent.horizontalCenter;

我可以轻松设置字体样式并缩放其大小。目前我需要在Canvas 中使用与二维上下文相同的机制。问题在于字体的定义不同，如下所示：

ctx.fillStyle = "white";
ctx.font = "bold 17px sans-serif";
ctx.fillText("Qt Quick", 40, 70);

来源：https://doc.qt.io/qt-5/qtquick-canvas-example.htmlhttps://doc.qt.io/qt-5/qml-qtquick-context2d.html#font-prop

有什么方法可以将字体样式设置为资源中的字体样式并动态缩放？

【参考方案1】：

你可以这样做：

ctx.font = '%1pt %2'.arg(fontSizeTitle * scale).arg(roboFont.name);

如果字体名称包含空格，您还必须引用它：

ctx.font = '%1pt "%2"'.arg(fontSizeTitle * scale).arg(roboFont.name);

---

对于letterSpacing，在Context2D 中似乎是不可能的：

支持字体的 w3C 2d 上下文标准的子集：

字体样式（可选）：正常 |斜体 |斜的 字体变体（可选）：正常 |小型股 字体粗细（可选）：正常 |粗体 | 0 ... 99 字体大小：Npx | Npt（其中 N 是正数） 字体系列：见http://www.w3.org/TR/CSS2/fonts.html#propdef-font-family

如果确实需要，仍然可以选择手动操作。