使用现有画布而不丢失 pIxi.js 中的内容答案

【问题标题】：Use an existing canvas without losing contents in pIxi.js使用现有画布而不丢失 pIxi.js 中的内容
【发布时间】：2021-04-05 14:57:42
【问题描述】：

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

我知道如果我想将 pixi.js 渲染到现有画布上，我必须指定 view。

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

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

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

【问题讨论】：

你可以让 Pixi 绘制到屏幕外的画布上，然后将它和另一个画布的输出组合到第三个屏幕上的画布上。
@obscure 感谢您的回复。你能告诉我更多关于“组合输出”的观点吗？我不完全确定如何在 pixi.js 中完成。

标签： javascript canvas html5-canvas pixi.js

【解决方案1】：

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

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

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

现在您可能想知道如何做到这一点。

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

在这个更新循环中，我们需要做以下事情：

更新 Pixi 的动画并将其称为渲染器
清除第三个（屏幕上）画布
将第一个画布的内容绘制到第三个画布
将第二个画布的内容绘制到第三个

基本上就是这样——虽然听起来有点抽象。

这是一个示例（只需单击“运行代码 sn-p”）：

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

&lt;script src="https://d157l7jdn8e5sf.cloudfront.net/dev/pixi-legacy.js"&gt;&lt;/script&gt;

背景中的狗图片是从第一个画布开始的，狗Pixi的旋转网格输出到第二个画布。

【讨论】：