Question

到目前为止，我已经像这样处理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;
}

我可以轻松设置字体样式并缩放其大小。目前，我需要在带有2d上下文的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.html https://doc.qt.io/qt-5/qml-qtquick-context2d.html#font-prop

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

Answer 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

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

二维上下文中的字体缩放

1 个答案: