用 pixi.js 平铺绘图的最快方法？答案

【问题标题】：Fastest way to tile a drawing with pixi.js?用 pixi.js 平铺绘图的最快方法？
【发布时间】：2016-09-13 04:27:15
【问题描述】：

我有一个由 pixi.js 渲染器渲染的计算量大的绘图。然后，我从渲染器视图创建精灵，以便水平平铺绘图，并在屏幕画布上渲染精灵（使用 webgl 作为自动检测）但是，我发现整个操作仍然很慢。你能告诉性能如何提高吗？我不确定是否可以改用RenderTexture，以及它是否会带来显着的收益。感谢您的帮助，这是我脚本的代码摘录：

 var canvasRenderer = new PIXI.autoDetectRenderer(w, h, {
   view :        $('#canvas')[0],    
   clearBeforeRender :     false  
 });

 var canvasGraphics = new PIXI.Graphics();
 var canvasStage = new PIXI.Container(); 
 canvasStage.addChild(canvasGraphics);
 canvasGraphics.beginFill();

   var renderer = new PIXI.autoDetectRenderer(width, height);
   var graphics = new PIXI.Graphics();
   var stage = new PIXI.Container();
   stage.addChild(graphics);
   graphics.beginFill();

   // Whole lotta rects
   for (var i in rects) {         
     graphics.drawRect(
       rects[i].left, rects[i].top, rects[i].width, rects[i].height
     );
   }
   graphics.endFill();
   renderer.render(stage);

   for (var j = 0; j <= loops; j++) {
     var sprite = PIXI.Sprite.from(renderer.view);
       sprite.x = j * width;
       canvasStage.addChild(sprite);
     }
   }

 canvasGraphics.endFill();
 canvasRenderer.render(canvasStage);

【问题讨论】：

标签： pixi.js

【解决方案1】：

PIXI 有一个TilingSprite 就是为了这个目的。

如果您要绘制图形，则应使用RenderTexture，然后将其放入TilingSprite。

var renderer = new PIXI.autoDetectRenderer(width, height);
var stage = new PIXI.Container();

//Draw your Graphics
var graphics = new PIXI.Graphics();
graphics.beginFill();
for (var i in rects) {         
    graphics.drawRect(
        rects[i].left, rects[i].top, rects[i].width, rects[i].height
    );
}
graphics.endFill();

//Create a RenderTexture to hold the Graphics.
//I don't know the size of your Graphics, so I'm making it up as 50 x 50
var texture = new PIXI.RenderTexture(new PIXI.BaseRenderTexture(50, 50));

//Render the Graphics into the Texture
renderer.render(graphics, texture);

//Create a TilingSprite from the Texture
var tilesprite = new PIXI.extras.TilingSprite(texture, renderer.width, renderer.height);
stage.addChild(tilesprite);

renderer.render(stage);

【讨论】：