2017-11-02 15 views
1

Ich baue ein Werkzeug, das Fahrradräder visualisiert. Es verwendet ungefähr 100 PIXI.Graphics, um das gesamte Rad zu bauen, das alle in einem PIXI.Container platziert und dann gerendert wird. Es scheint ziemlich viel zu sein, jeden Frame zu rendern, also habe ich mir die PIXI.RenderTexture-Klasse angesehen und gedacht, dass es in diesem Fall Sinn macht, sie zu verwenden. Also Frage 1, ist das ein guter Anwendungsfall? und Frage 2, wie kann ich es verwenden, weil ich Schwierigkeiten habe, es auszuarbeiten.Wie und wann PIXI.RenderTexture verwenden

const options = { 
 
    transparent: true, 
 
    antialias: true, 
 
    backgroundColor: 0xffffff, 
 
    resolution: window.devicePixelRatio, 
 
    view: canvasEle, 
 
}; 
 

 
const app = new PIXI.Application(width, height, options); 
 

 
const wrapper = new PIXI.Container(); // Wrapper is used for zooming and panning the wheel 
 
app.stage.addChild(wrapper); 
 

 
const wheel = new Wheel(wheelOpts); // Returns PIXI.Container full of PIXI.Graphics 
 
wrapper.addChild(wheel);

Und mein Versuch, die renderTexture wie folgt zu verwenden. Aber ich kann nicht scheinen, um es zu arbeiten,

const options = { 
 
    transparent: true, 
 
    antialias: true, 
 
    backgroundColor: 0xffffff, 
 
    resolution: window.devicePixelRatio, 
 
    view: canvasEle, 
 
}; 
 

 
const app = new PIXI.Application(width, height, options); 
 

 
const wrapper = new PIXI.Container(); // Wrapper is used for zooming and panning the wheel 
 
app.stage.addChild(wrapper); 
 

 
const wheelRenderTexture = new PIXI.RenderTexture.create(width, height); 
 
const wheelSprite = new PIXI.Sprite(wheelRenderTexture) 
 
wrapper.addChild(wheelSprite) 
 

 
const wheel = new Wheel(wheelOpts); // Returns PIXI.Container full of PIXI.Graphics 
 

 
app.ticker.add(() => 
 
{ 
 
    app.renderer.render(wheel, wheelRenderTexture); 
 
})

Vielen Dank für jede Hilfe

Antwort

0

Ich arbeitete heraus, wie es zu benutzen und machte eine kleine jsfiddle https://jsfiddle.net/hp98ygz5/1/

const width = 600 
const height = 600 

var app = new PIXI.Application(width, height, {backgroundColor : 0xffffff}); 
document.body.appendChild(app.view); 

const wheelRenderTexture = PIXI.RenderTexture.create(width, height); 
const wheelRenderSprite = new PIXI.Sprite(wheelRenderTexture); 
app.stage.addChild(wheelRenderSprite) 

const wheelContainer = new PIXI.Container() 
//app.stage.addChild(wheelContainer) 
wheelContainer.addChild(drawCircle(100,100,50,0xfec3dc,2,0Xfe68a4)) 
wheelContainer.addChild(drawCircle(100,100,20,0xFFCC66,2,0X55ff77)) 

app.renderer.render(wheelContainer,wheelRenderTexture) 

Ich bin nicht sicher, was mit dem obigen Beispiel falsch war, aber es funktioniert jetzt

Verwandte Themen