javascript - 使用 PIXI JS 更改弯曲文本中的字体大小

Question

是否有一种简单的方法可以更改 PIXI JS 弯曲文本中的字体大小？文本是通过 new PIXI.mesh.Rope(pixiText.texture, points) 创建的。使用调整大小按钮(检查下图)，您可以更改对象的大小。我可以使用 scale 但它会降低质量。

在基本文本对象中可以更改字体大小 text.style.fontSize = newFontSize。

Answer 1

没有比更改字体大小更简单的方法了。这里的问题是通过 Text 对象生成的字母使用特殊机制，使其能够快速重新呈现。要创建网格，您需要纹理，它不能是 Text 或 Graphics 对象，因为它们是根据自己的设置渲染的。

有两种解决方法:

1. 如果用户的空间有限，您可以尝试生成更大的文本，然后生成网格并缩小它，这样即使用户调整它的大小，文本的分辨率仍然足够好。这很容易做到，但它可能不会令您满意，或者在您的情况下可能难以实现。

2. 更好但更难实现的解决方案是每帧或在用户调整纹理后更新纹理。有两种方法:

   • 使用附加 Canvas 并在那里绘制文本以执行手动更新(将新纹理加载到 gpu)或可能使用 text.resolution 属性并以类似方式更新它
   • 使用RenderTexture .这种特殊的纹理允许将任何 pixi 对象渲染到其中，所以您可以做的是:创建 Text 对象并使用您已经做过的属性对其进行操作，使用它创建 RenderTexture文本或带有文本和其他所需元素的容器，然后使用此纹理创建网格。如果您对文本进行任何更新，它将使用 renderTexture 自动渲染到网格中。