如果你在 * pixi.js * / WebGL画布上放置一些文本,并放大它,会发生以下情况:http://jsbin.com/qeqoneselelo/1/。
x1c 0d1x的数据
结果是坏:模糊/像素化,就像我们放大位图一样。
相反,我希望能够放大这个文本,就好像它是矢量图形(文本实际上是!),即没有模糊,就像这里的例子(你可以无限放大多次,没有模糊!):http://s419743653.onlinehome.fr/things/test2.htm
如何使用pixi.js对文本进行适当的缩放?(或者,如果使用pixi.js不可能,使用另一个WebGL canvas JavaScript工具包?)
- 以下是我使用的代码(仅在http://jsbin.com/qeqoneselelo/1/上可用)*:
var text = new PIXI.Text("Hello World", {font:"50px Arial", fill:"black"});
var scrollArea = new PIXI.DisplayObjectContainer();
scrollArea.scale.x = 10;
scrollArea.scale.y = 10;
scrollArea.addChild(text);
stage.addChild(scrollArea);
字符串
2条答案
按热度按时间rdrgkggo1#
据我所知,没有办法。
这就是pixi.js的全部意义。它通过使用位图精灵来获得速度。其结果是,当你缩放时,你会看到效果,但你会获得超级速度。
如果你想要流畅的文本,你不需要pixi.js。你只需要使用canvas API。当然,你会给予pixi.js的一些速度和其他功能,但你会得到流畅的文本。
如果你想继续使用pixi.js,一个解决方案是使用LOD。制作多个带有逐渐变大的文本的sprites,当你放大时,使用一个带有更高分辨率文本的逐渐变大的sprites,但是它的比例是独立的,所以它保持相同的大小。不幸的是,因为字体大小有点不可预测,所以要让sprites不间断地过渡可能需要一些尝试和错误。
字符串
这里有一个例子
9rbhqvlz2#
通过设置
resolution
属性来设置Text
示例的Pixi默认渲染器分辨率:字符串
的数据