Pixi.js: Quiero hacer una pantalla receptiva como una demostración.

el repositorio del código fuente para esta página de demostración está disponible aquí.
Tiene varias formas de descargar el código fuente.

https://github.com/pixijs/examples

Lo siento,
Perdóneme. Eso no significa eso.

No quiero el código de demostración en sí.

Cuando la ventana se amplía o reduce en la página donde se implementa el código de demostración de PixiJS, la imagen del conejo en el interior también se escala en la misma proporción.
https://pixijs.io/examples/#/demos -basic / container.js

Esto no se puede lograr simplemente implementando el código de demostración.

Lamento que haya sido difícil pasar.

ho es solo un CSS trucos, si no está seguro de cómo funciona, también puede usar js y listener para piratear el css y ajustar la pantalla en el evento de cambio de tamaño.
Te hice un ejemplo aquí para ajustar la escala automática a la pantalla con relación.
https://www.pixiplayground.com/#/edit/1vNMaYhaqi1 -JnwJ_0Y_m
¿Es esto de ayuda?

Eso es todo.

Solía ​​usar el módulo KonvaJS antes.
Al cambiar la escala del objeto Stage, pude cambiar relativamente el tamaño del lienzo.

¿Es imposible escalar y cambiar el tamaño de CANVAS con PixiJS? ¿O no es mayor?
Algunas imágenes no son muy buenas para confiar en CSS.

este artículo es otro enfoque y también puede ayudarlo.
https://medium.com/@michelfariarj/scale -a-pixi-js-game-to-fit-the-screen-1a32f8730e9c

Gracias. Muy cerca de lo ideal.

Sin embargo, al igual que la muestra que encontré, el lienzo de PixiJS se extiende por todo el tamaño de la pantalla.

Quiero agregar un componente PixiJS dentro de un div y cambiar su tamaño dentro.

En otras palabras, como escribí al principio, en lugar de extender el lienzo para llenar la pantalla, quiero introducirlo dentro de un solo div, como la página de demostración de PixiJS.
https://pixijs.io/examples/#/demos -basic / container.js

Como puede ver, se escala en algún div de la pantalla, no en toda la pantalla.

Además, el tamaño mínimo del lienzo es fijo y creo que es una pantalla muy bonita.

Esto es ideal.

Gracias.

Está bien, pero será necesario esperar y ver con un desarrollador webMaster,
No soy lo suficientemente bueno en FrontEnd para responderte sobre esto y yo también mi inglés es bastante limitado.
Desafortunadamente, hice lo mejor que pude y estoy limitado por la barrera del idioma.

También puede ver que la página de origen de la demostración usa Iframe para dividir, tal vez necesite crear un DIV con sus reglas CSS y poner Iframe con id adentro y pasar el nuevo id de lienzo a la aplicación pixi.

lo siento.

En otras palabras, no quiero mostrar el lienzo de PixiJS en pantalla completa.

Por ejemplo, hay un div en HTML. Suponga que coloca el lienzo de PixiJS en él.
Suponga que el div es 300 * 300 cuando la ventana se abre a pantalla completa.
A medida que la ventana se hace más pequeña, se escalará con una proporción de 1: 1.

Ciertamente, la demostración se implementa en un iframe.
En cambio, quiero que esto funcione igual en un div html normal.

Como una demostración, no como una pantalla completa, sino como parte de la pantalla.

Gracias.

Utilice flex.

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

El tamaño del lienzo es siempre el mismo, se cambia de tamaño a través de CSS, el navegador hace la escala.

En caso de que desee un lienzo con una proporción de píxel a píxel, tendrá que aprender todo: css, transformaciones de pixi, cómo cambiar el tamaño del lienzo de pixi, qué hace pixi cuando cambia el tamaño del lienzo.

¿PixiJS está escalando por CSS en lugar de PixiJS en sí?

KonvaJS proporcionó un método para escalar el escenario.

Me gustaría implementar lo mismo si es posible.

¿PixiJS está escalando por CSS en lugar de PixiJS en sí?

Hay escala de transformación de escenario, cambio de tamaño de lienzo, y hay parámetros de ancho / alto de CSS y opciones de flexión. Combínelos para hacer que la aplicación escale de la manera que desee.

KonvaJS proporcionó un método para escalar el escenario.

PixiJS no se trata de cambiar el tamaño de las cosas, se trata de renderizar. cambiar el tamaño es fácil. Entiendo que la gente necesita esto para comenzar a hacer aplicaciones rápidamente; bueno, ¡aquí está el ejemplo flexible! ¿Quieres más? Tienes que aprender. De lo contrario, se quedará atrapado más tarde con los mismos problemas pero en un nivel diferente. Sin el conocimiento de las transformaciones, no podrá colocar sus elementos y rotarlos alrededor de los puntos.

Otro problema es que nadie hizo un artículo sobre métodos de cambio de tamaño, ¡nadie! La gente preguntó al respecto, respondimos, ¡pero todavía ni un solo artículo!

Puede buscar en https://www.html5gamedevs.com/forum/15-pixijs/ temas sobre el cambio de tamaño, hay muchos.

Si haces un artículo, lo pondré en nuestra wiki: https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide

Me gustaría implementar lo mismo si es posible.

Portar el componente de cambio de tamaño de Konva en PixiJS es una buena idea.

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

Tengo una pantalla de KonvaJS que puede hacer tal zoom y mover el escenario arrastrándolo.

Quiero transferir esto a PixiJS.

Sin embargo, PixiJS sintió que el objeto era complejo.

¿Alguien podría escribir un código de muestra?

¿Ha mirado https://github.com/davidfig/pixi-viewport ?

Quiero usar PixiJS puro.
También estaba muy interesado en PixiJS V5 y decidí pasar de KonvaJS.

Gracias.

Sin embargo, es similar al zoom y arrastre que desea lograr.

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

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

He estado trabajando duro en PixiJS y tratando de crear una página que se comporte igual que la página que creé con KonvaJS.

Sin embargo, no funciona correctamente.

¿No debería PixiJS escalar el escenario?

Funciones que quiero implementar.
・ El tamaño del lienzo es de aproximadamente 800 * 800.
・ Primero lea la imagen y colóquela en un lienzo. Sin embargo, el tamaño de la imagen varía de 8000 * 8000 a 6000 * 6000 (el cuadrado es fijo).
・ Después de mostrar la imagen exactamente al tamaño del lienzo, coloque una gran cantidad de objetos Pixi como círculos y personajes en el escenario.
・ Quiero acercar y alejar con la rueda del mouse.
・ Después de acercar, arrastre la posición del escenario arrastrándola. (Pero no se mueve fuera del final del escenario).

Me gustaría que vieran el código fuente que realmente se creó y dieran consejos.

De acuerdo, me diste suficiente información, lo veré :)

window.addEventListener ('redimensionar', redimensionar);

resize ();
var w, h;
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 lienzo = document.getElementById ("lienzo")

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

Estoy cambiando el tamaño usando los códigos anteriores. No hay problema.

@dijitaletkinlikler
No quiero cambiar el tamaño.
Estoy intentando implementar el zoom y el arrastre.

Gracias.

Lo siento, tu ejemplo me dio un poco de ansiedad, porque demasiada gente espera mi ayuda. Revisé el código solo 1 minuto, pero vi que casi tiene todo lo necesario, solo necesito agregar algunas matemáticas y experiencia en ejemplos de pixi.

Tengo ese código para mover cuadrados: https://pixijs.io/examples/#/plugin -projection / basic.js, puedes hacer lo mismo con tu pantalla. Los problemas de escala se pueden resolver usando las funciones toLocal / toGlobal .

También resolver esta tarea debería ayudarlo en el futuro, las mismas cosas aparecerán una y otra vez cuando use las transformaciones e interacción de pixi.

Lo siento, tienes que esperar a que alguien más te ayude.

PD: Le pedí a nuestros muchachos en holgura que me ayudaran en caso de que alguien estuviera libre

Encontré pixi-viewport una biblioteca muy atractiva y miré en ella.

La documentación dice que es para v4, pero si verifica el problema, parece funcionar bien en v5.

Por lo tanto, usaré pixi-viewport para realizar el ideal.

Sin embargo, ya sea que lo use mal o que v5 y pixi-viewport no sean compatibles, no funciona correctamente.

Una vez que esto se resuelva, lo anunciaré aquí.

De la misma manera en el futuro, cuando alguien esté en problemas.

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

Pude resolver este problema usando pixi-viewport.

PixiJS tiene una comunidad bien desarrollada y es muy complaciente.

Creo que esta biblioteca es realmente genial.

Muchas gracias.