- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
如果您在 pixi.js/WebGL Canvas 上放置一些文本,然后放大它,会发生以下情况:http://jsbin.com/qeqoneselelo/1/ .
结果不好:模糊/像素化,就像我们在位图上缩放一样。
相反,我希望能够放大此文本,就好像它是矢量图形(文本实际上是!),即完全没有模糊,例如这里(您可以无限放大多次,没有模糊! ) : 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);
最佳答案
据我所知没有办法。
这就是 pixi.js 的全部意义所在。它通过使用位图 Sprite 获得速度。其结果是您在扩展时看到的效果,但您获得了超快的速度。
如果你想要流畅的文本,你不需要 pixi.js。只需使用 Canvas API。当然,你会放弃 pixi.js 的一些速度和其他功能,但你会得到流畅的文本。
如果您想继续使用 pixi.js,一种解决方案是使用 LOD。制作多个 Sprite ,上面的文字逐渐变大,当你放大时,使用一个逐渐变大的 Sprite 和更高分辨率的文字,但它有自己的比例,所以它保持相同的大小。不幸的是,由于字体大小有点不可预测,因此要使 Sprite 完美过渡可能需要反复试验。 变种文本= []; 对于 (var ii = 0; ii < 15;++ii) {
var text = new PIXI.Text("Hello World", {font: (ii * 10) +"px Arial", fill:"black"});
text.scale.x = 1 / (1 + ii);
text.scale.y = 1 / (1 + ii);
texts.push(text);
}
...
text = undefined;
function animate() {
var t = Date.now() * 0.001;
var scale = 1 + 14 * (Math.sin(t) * 0.5 + 0.5);
if (text) {
scrollArea.removeChild(text);
}
text = texts[Math.floor(scale)];
scrollArea.addChild(text);
scrollArea.scale.x = scale;
scrollArea.scale.y = scale;
renderer.render(stage);
requestAnimFrame(animate);
}
举个例子
var stage = new PIXI.Stage(0xFFFFFF);
var renderer = PIXI.autoDetectRenderer(800, 600);
document.body.appendChild(renderer.view);
var texts = [];
for (var ii = 0; ii < 15; ++ii) {
var text = new PIXI.Text("Hello World", {font: (ii * 10) +"px Arial", fill:"black"});
text.scale.x = 1 / (1 + ii);
text.scale.y = 1 / (1 + ii);
texts.push(text);
}
var scrollArea = new PIXI.DisplayObjectContainer();
scrollArea.interactive = true;
scrollArea.buttonMode = true;
// scrollArea.addChild(text);
stage.addChild(scrollArea);
scrollArea.mousedown = function(data) {
data.originalEvent.preventDefault();
this.data = data;
this.dragging = true;
}
scrollArea.mouseup = scrollArea.mouseupoutside = function(data) {
this.dragging = false;
this.data = null;
}
scrollArea.mousemove = function(data) {
if (this.dragging) {
var newPos = this.data.getLocalPosition(this.parent);
this.position.x = newPos.x;
this.position.y = newPos.y;
}
}
text = undefined;
function animate() {
var t = Date.now() * 0.001;
var scale = 1 + 14 * (Math.sin(t) * 0.5 + 0.5);
if (text) {
scrollArea.removeChild(text);
}
text = texts[Math.floor(scale)];
scrollArea.addChild(text);
scrollArea.scale.x = scale;
scrollArea.scale.y = scale;
renderer.render(stage);
requestAnimFrame(animate);
}
animate();
<script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/1.6.1/pixi.js"></script>
关于javascript - pixi.js/WebGL 的缩放效果不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25838214/
我是一名优秀的程序员,十分优秀!