Pixi.js: Хочу сделать отзывчивый экран как на демке

репозиторий с исходным кодом для этой демонстрационной страницы доступен здесь.
У вас есть несколько способов загрузить исходный код.

https://github.com/pixijs/examples

Простите,
Прошу прощения. Это не значит.

Мне не нужен сам демонстрационный код.

Когда окно увеличивается или уменьшается на странице, где развернут демонстрационный код PixiJS, изображение кролика внутри также масштабируется в том же соотношении.
https://pixijs.io/examples/#/demos -basic / container.js

Этого нельзя достичь простой реализацией демонстрационного кода.

Мне жаль, что было трудно дозвониться.

но это просто трюки CSS , если вы не уверены, как это работает, вы также можете использовать js и listener, чтобы взломать css и подогнать экран при изменении размера.
Я сделал вам пример здесь для автоматического масштабирования по размеру экрана с соотношением сторон.
https://www.pixiplayground.com/#/edit/1vNMaYhaqi1 -JnwJ_0Y_m
Это поможет?

Ну это все.

Раньше я использовал модуль KonvaJS.
Изменив масштаб объекта Stage, я смог изменить размер холста.

Невозможно масштабировать и изменять размер самого CANVAS с помощью PixiJS? Или это не главное?
Некоторые изображения не очень хорошо полагаются на CSS.

эта статья - еще один подход, которая также может вам помочь.
https://medium.com/@michelfariarj/scale -a-pixi-js-game-to-fit-the-screen-1a32f8730e9c

Спасибо. Очень близко к идеалу.

Однако, как и в случае с образцом, который я нашел, Canvas of PixiJS распространяется по всему размеру экрана.

Я хочу добавить компонент PixiJS внутри div и изменить его размер внутри.

Другими словами, как я писал в начале, вместо того, чтобы растягивать холст для заполнения экрана, я хочу представить его внутри одного div, такого как демонстрационная страница PixiJS.
https://pixijs.io/examples/#/demos -basic / container.js

Как видите, он масштабируется в каком-то делении экрана, а не во всем экране.

Также фиксирован минимальный размер холста, и я считаю, что это очень хороший экран.

Это идеально.

Спасибо.

Это нормально, но нужно будет подождать и посмотреть с разработчиком веб-мастера,
Я недостаточно хорошо владею FrontEnd, чтобы ответить вам по этому поводу, и я тоже мой английский довольно ограничен.
К сожалению, я старался изо всех сил, и меня ограничивает языковой барьер.

Вы также можете увидеть, как демонстрационная страница с исходным кодом использует Iframe для разделения. Возможно, вам понадобится создать DIV с вашими правилами CSS и поместить внутри Iframe с идентификатором и передать новый идентификатор холста в приложение pixi.

Извините.

Другими словами, я не хочу отображать холст PixiJS в полноэкранном режиме.

Например, в HTML есть один div. Предположим, вы поместили в него холст PixiJS.
Предположим, что размер div составляет 300 * 300, когда окно открывается в полноэкранном режиме.
По мере того, как окно становится меньше, оно масштабируется с соотношением 1: 1.

Разумеется, демонстрация реализована в iframe.
Вместо этого я хочу, чтобы это работало так же в обычном html div.

Вроде демо, не во весь экран, а как часть экрана.

Спасибо.

Используйте flex.

https://github.com/ivanpopelyshev/pixi-starfighter
https://github.com/ivanpopelyshev/pixi-starfighter/blob/master/css/index.css

Размер холста всегда один и тот же, его размер изменяется с помощью CSS, масштабирование выполняет браузер.

Если вам нужен холст с соотношением пикселей к пикселям - вам нужно будет изучить все: css, преобразования pixi, как изменить размер холста pixi, что делает pixi при изменении размера холста.

Масштабирование PixiJS осуществляется с помощью CSS, а не с помощью самого PixiJS?

KonvaJS предоставил метод масштабирования сцены.

Я бы хотел реализовать то же самое, если возможно

Масштабирование PixiJS осуществляется с помощью CSS, а не с помощью самого PixiJS?

Есть масштаб трансформации сцены, есть изменение размера холста, а также есть параметры ширины / высоты CSS и параметры гибкости. Объедините их, чтобы приложение масштабировалось так, как вы хотите.

KonvaJS предоставил метод масштабирования сцены.

PixiJS - это не изменение размера, а рендеринг. изменить размер легко. Я понимаю, что людям это нужно, чтобы начать быстро создавать приложения - вот пример гибкости! Ты хочешь больше? Вы должны учиться. В противном случае вы позже столкнетесь с теми же проблемами, но на другом уровне. Без знания преобразований вы не сможете позиционировать элементы и вращать их вокруг точек.

Еще одна проблема в том, что о методах изменения размеров никто не писал статьи, никто! Люди спрашивали об этом, мы отвечали, но все равно ни одной статьи!

Вы можете поискать на https://www.html5gamedevs.com/forum/15-pixijs/ темы об изменении размера, их много.

Если вы напишете статью, я помещу ее в нашу вики: https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide

Я бы хотел реализовать то же самое, если возможно

Перенос компонента изменения размера Konva на PixiJS - хорошая идея.

https://jsfiddle.net/Lhankor_Mhy/pvwr8b2g/3/

У меня есть экран KonvaJS, который может делать такое масштабирование и перемещать сцену перетаскиванием.

Я хочу передать это на PixiJS.

Однако PixiJS посчитал объект сложным.

Может ли кто-нибудь написать образец кода?

вы смотрели https://github.com/davidfig/pixi-viewport ?

Я хочу использовать чистый PixiJS.
Еще меня очень заинтересовал PixiJS V5, и я решил перейти с KonvaJS.

Спасибо.

Однако это похоже на масштабирование и перетаскивание, которого вы хотите добиться.

KonvaJS
https://jsfiddle.net/takeshi1234/a0uqk23e/1/

PixiJS
https://jsfiddle.net/takeshi1234/hk0wbj3m/4/

Я много работал над PixiJS и пытался создать страницу, которая ведет себя так же, как страница, которую я создал с помощью KonvaJS.

Однако это не работает должным образом.

Разве PixiJS не должен масштабировать сцену?

Функции, которые я хочу реализовать.
・ Размер холста около 800 * 800.
・ Сначала прочтите изображение и поместите его на холст. Однако размер изображения варьируется от 8000 * 8000 до 6000 * 6000 (квадрат фиксированный).
・ После отображения изображения точно по размеру холста поместите на сцену большое количество объектов Pixi, таких как круги и символы.
・ Я хочу увеличивать и уменьшать масштаб с помощью колеса мыши.
・ После увеличения перетащите позицию рабочей области путем перетаскивания. (Но он не выходит за пределы стадии.)

Я бы хотел, чтобы вы взглянули на исходный код, который действительно был создан, и дали совет.

Хорошо, вы дали мне достаточно информации, я посмотрю :)

window.addEventListener ('изменить размер', изменить размер);

resize ();
вар ш, ч;
function resize () {

var canvasRatio = 800 / 1440; ////canvas widthve canvas height
var windowRatio = window.innerHeight / window.innerWidth;



if (windowRatio < canvasRatio) {
    h = window.innerHeight;  
    w = h / canvasRatio;

} else {
    w = window.innerWidth;
    h = w * canvasRatio;

}
app.view.style.width = w + 'px';
app.view.style.height = h + 'px';
// resizeHtmlElement ();
}

const canvas = document.getElementById ("холст")

const app = new PIXI.CanvasRenderer ({

view:canvas,
width:1440,
height:800,
backgroundColor: 0xFFFFFF,
antialias: true

})

//document.body.appendChild(app.view);

var stage = new PIXI.Container ();

Я изменяю размер с помощью приведенных выше кодов. Без проблем.

@dijitaletkinlikler
Я не хочу изменять размер.
Пытаюсь реализовать масштабирование и перетаскивание.

Спасибо.

Извините, ваш пример немного встревожил меня, потому что слишком много людей ждут моей помощи. Я просмотрел код всего за 1 минуту, но увидел, что у вас есть почти все необходимое, просто нужно добавить немного математики и примеров из pixi.

У меня есть этот код для перемещения квадратов: https://pixijs.io/examples/#/plugin -projection / basic.js, вы можете сделать то же самое со своим экраном. Проблемы масштабирования можно решить с помощью функций toLocal / toGlobal .

Также решение этой задачи должно помочь вам в будущем, одни и те же вещи будут появляться снова и снова, когда вы используете преобразования и взаимодействие pixi.

Извините, вам нужно подождать, пока кто-нибудь вам поможет.

PS Я просил наших ребят в слабине помочь на случай, если кто-то освободится

Я нашел pixi-viewport очень привлекательной библиотекой и заглянул в нее.

В документации указано, что это для v4, но если вы проверите проблему, похоже, что он отлично работает с v5.

Поэтому я буду использовать pixi-viewport, чтобы реализовать идеал.

Однако независимо от того, использую ли я его плохо, или v5 и pixi-viewport несовместимы, он не работает должным образом.

Как только проблема будет решена, я объявлю об этом здесь.

Так же и в будущем, когда кто-то попадает в беду.

https://github.com/davidfig/pixi-viewport/issues/212

Мне удалось решить эту проблему с помощью pixi-viewport.

PixiJS имеет хорошо развитое сообщество и очень любезен.

Я считаю, что эта библиотека действительно отличная.

Большое спасибо.