Использовать существующий холст без потери содержимого в pIxi.js
Я новичок в Pixi.js, поэтому мне очень жаль, что это глупый вопрос.
Я понимаю, что если я хочу отобразить pixi.js на существующем холсте, я должен указать view.
const app = new PIXI.Application({
view: myExistingCanvas,
});
Однако я понял, что если я напишу так, приложение Pixi фактически перезапишет мой существующий холст, и я потеряю все содержимое внутри «myExistingCanvas».
Может ли кто-нибудь посоветовать мне, как я могу создать приложение pixi поверх существующего холста без перезаписи?
@obscure Спасибо за ответ. Не могли бы вы подробнее рассказать о своей точке зрения на «объединение результатов»? Я не совсем уверен, как это можно сделать в pixi.js.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Используя свойство Посмотреть, вы можете передать конструктору нового PIXI.Application, мы можем указать ему использовать существующий холст. Хотя этот холст не обязательно должен быть добавлен в DOM - достаточно, если он существует «виртуально».
Итак, в конечном итоге нам нужно три экземпляра Canvas - все они должны иметь одинаковые размеры.
- Первым холстом будет существующий холст, который вы упомянули в своем вопросе, и действующий как холст за пределами экрана.
- Второй холст - это еще один пустой холст за пределами экрана, на котором фиксируется вывод Pixi.
- Третий холст на самом деле является экранным холстом, который объединяет выходные данные двух предыдущих холстов.
Теперь вы можете задаться вопросом, как это сделать.
Для этого мы должны перехватить цикл обновления Pixi, что мы можем сделать, добавив тикер в PIXI.Ticker.shared.
Внутри этого цикла обновления нам нужно сделать следующее:
- Обновите анимацию Pixi и назовите ее рендерером
- Очистить третий (экранный) холст
- Нарисуйте содержимое первого холста на третьем
- Нарисуйте содержимое второго холста на третьем
В основном это все - хотя это может показаться немного абстрактным.
Вот пример (просто нажмите «Выполнить фрагмент кода»):
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>Изображение собаки на заднем плане - это изображение с первого холста, а вращающаяся сетка собак, выведенная Pixi, - на второй холст.
Вероятно, вы могли бы позволить Pixi рисовать на холсте за пределами экрана и объединить вывод этого и другого холста с третьим экранным холстом.