javascript - 使用现有 Canvas 而不丢失 pIxi.js 中的内容

Question

我对 Pixi.js 很陌生，所以很抱歉这是一个愚蠢的问题。

我明白，如果我想将 pixi.js 渲染到现有 Canvas 上，我必须指定 view。

const app = new PIXI.Application({
    view: myExistingCanvas,
});

但是，我意识到，如果我这样写，Pixi 应用程序实际上会覆盖我现有的 Canvas ，并且最终会丢失“myExistingCanvas”中的所有内容。

有人可以告诉我如何在现有 Canvas 上创建 pixi 应用程序而不覆盖吗？

Answer 1

使用可以传递给新PIXI.Application的构造函数的view属性，我们可以告诉它使用现有的Canvas。不过，这个 Canvas 不一定要添加到 DOM 中 - 如果它“虚拟”存在就足够了。

所以最终我们需要三个 Canvas 实例 - 它们都应该具有相同的尺寸。

• 第一个 Canvas 是您在问题中提到的现有 Canvas ，充当屏幕外 Canvas
• 第二个 Canvas 是另一个空的离屏 Canvas ，用于捕获 Pixi 的输出
• 第三个 Canvas 实际上是屏幕上的 Canvas ，它结合了前两个 Canvas 的输出

现在您可能想知道如何执行此操作。

为此，我们必须拦截 Pixi 的更新循环，我们可以通过向 PIXI.Ticker.shared 添加一个股票代码来实现。

在此更新循环内，我们需要执行以下操作:

• 更新 Pixi 的动画并调用它的渲染器
• 清除第三个(屏幕上) Canvas
• 将第一个 Canvas 的内容绘制到第三个 Canvas
• 将第二个 Canvas 的内容绘制到第三个 Canvas

基本上就是这样 - 尽管听起来有点抽象。

这是一个示例(只需单击“运行代码片段”):

let offScreenCanvasA = document.createElement("canvas");
let offScreenCanvasB = document.createElement("canvas");
let onScreenCanvas = document.createElement("canvas");
let width = 400;
let height = 300;


offScreenCanvasA.width = width;
offScreenCanvasB.width = width;
onScreenCanvas.width = width;

offScreenCanvasA.height = height;
offScreenCanvasB.height = height;
onScreenCanvas.height = height;

document.body.appendChild(onScreenCanvas);

const app = new PIXI.Application({
  view: offScreenCanvasB,
  transparent: true,
  width: 400,
  height: 300
});


const container = new PIXI.Container();
const renderer = PIXI.autoDetectRenderer();

app.stage.addChild(container);

const texture = PIXI.Texture.from('https://picsum.photos/id/237/26/37');

for (let i = 0; i < 25; i++) {
  const bunny = new PIXI.Sprite(texture);
  bunny.anchor.set(0.5);
  bunny.x = (i % 5) * 40;
  bunny.y = Math.floor(i / 5) * 40;
  container.addChild(bunny);
}

container.x = app.screen.width / 2;
container.y = app.screen.height / 2;
container.pivot.x = container.width / 2;
container.pivot.y = container.height / 2;

let ticker = PIXI.Ticker.shared
ticker.add(function(delta) {
  container.rotation -= 0.01;
  renderer.render(container);
  onScreenCanvas.getContext("2d").clearRect(0, 0, width, height);
  onScreenCanvas.getContext("2d").drawImage(offScreenCanvasA, 0, 0, width, height);
  onScreenCanvas.getContext("2d").drawImage(offScreenCanvasB, 0, 0, width, height);
});

let image = new Image();
image.onload = function(e) {
  offScreenCanvasA.getContext("2d").drawImage(e.target, 0, 0, width, height);
}
image.src = "https://picsum.photos/id/237/400/300";

<script src="https://d157l7jdn8e5sf.cloudfront.net/dev/pixi-legacy.js"></script>

背景中的狗图片来自第一个 Canvas ，Pixi 的狗旋转网格输出到第二个 Canvas 。