Question

我正在建造一个可视化自行车车轮的工具。它使用大约100个PIXI.Graphics来构建整个轮子，它全部放在PIXI.Container中然后渲染。渲染每一帧似乎相当多，所以我查看了PIXI.RenderTexture类，并认为在这种情况下使用它可能是有意义的。问题1，这是一个很好的用例吗？问题2，我如何使用它，因为我无法解决它。

＆＃13;

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

＆＃13;

我尝试使用renderTexture如下。但我似乎无法解决这个问题

＆＃13;

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

＆＃13;

感谢您的帮助

Answer 1

我找到了如何使用它并制作了一个小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)

我不确定上述示例有什么问题，但现在可以正常使用

如何以及何时使用PIXI.RenderTexture

1 个答案: