Question

如果你在 pixi.js / WebGL画布上放置一些文字并放大它，就会发生以下情况：http://jsbin.com/qeqoneselelo/1/。

enter image description here

结果是错误：模糊/像素化，就像我们放大位图一样。

相反，我希望能够放大这个文本，好像它是矢量图形（文本实际上是！），即根本没有模糊，例如这里（你可以无限多次缩放，没有模糊！）：http://s419743653.onlinehome.fr/things/test2.htm

如何使用pixi.js正确缩放文本？（或者，如果不可能使用pixi.js，使用其他WebGL画布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);

Answer 1

据我所知，没有办法。

这就是pixi.js的重点。它通过使用位图精灵获得速度。结果，你得到你在缩放时看到的效果，但你获得超高速。

如果你想要流畅的文字，你不需要pixi.js.只是你使用canvas API。当然，你会放弃pixi.js的一些速度和其他功能，但你会得到流畅的文字。

如果你想继续使用pixi.js，一种解决方案是使用LOD。使用逐渐增大的文本制作多个精灵，并且在放大时使用具有较高res文本的逐渐变大的精灵，但具有单独的比例，因此它保持相同的大小。不幸的是，因为字体大小有点不可预测，精灵过渡完美无瑕可能需要一些试验和错误。 var texts = []; for（var ii = 0; ii＆lt; 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);
  }

这是一个例子

＆＃13;

  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();

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/1.6.1/pixi.js"></script>

＆＃13;

Answer 2

通过设置Text属性来覆盖Pixi对resolution实例的默认渲染器分辨率：

var text = new PIXI.Text("Hello World", {font:"50px Arial", fill:"black"});
test.resolution = 8;

使用pixi.js / WebGL缩放不良

2 个答案: