Pixi.js: Je veux faire un écran responsive comme une démo

le dépôt du code source de cette page de démonstration est disponible ici.
Vous avez plusieurs façons de télécharger le code source.

https://github.com/pixijs/examples

Pardon,
Pardon. Cela ne veut pas dire cela.

Je ne veux pas du code de démonstration lui-même.

Lorsque la fenêtre est agrandie ou réduite sur la page où le code de démonstration PixiJS est déployé, l'image du lapin à l'intérieur est également mise à l'échelle du même rapport.
https://pixijs.io/examples/#/demos-basic/container.js

Cela ne peut pas être réalisé simplement en implémentant le code de démonstration.

Je suis désolé que cela ait été difficile à passer.

ho ce n'est qu'une CSS , si vous ne savez pas comment cela fonctionne, vous pouvez également utiliser js et listener pour pirater le css et ajuster l'écran lors de l'événement de redimensionnement.
Je vous ai fait un exemple ici pour l'ajustement automatique à l'écran avec le rapport.
https://www.pixiplayground.com/#/edit/1vNMaYhaqi1 -JnwJ_0Y_m
Est-ce de l'aide ?

Alors c'est tout.

J'avais l'habitude d'utiliser le module KonvaJS auparavant.
En modifiant l'échelle de l'objet Stage, j'ai pu redimensionner le canevas relativement.

Est-il impossible de mettre à l'échelle et de redimensionner CANVAS lui-même avec PixiJS ? Ou n'est-ce pas majeur ?
Certaines images ne sont pas très bonnes pour s'appuyer sur CSS.

cet article est une autre approche et peut également vous aider.
https://medium.com/@michelfariarj/scale -a-pixi-js-game-to-fit-the-screen-1a32f8730e9c

Merci. Très proche de l'idéal.

Cependant, tout comme l'échantillon que j'ai trouvé, le Canvas de PixiJS s'étend sur toute la taille de l'écran.

Je souhaite ajouter un composant PixiJS dans un div et le redimensionner à l'intérieur.

En d'autres termes, comme je l'ai écrit au début, au lieu d'étaler le canevas pour remplir l'écran, je veux l'introduire dans un seul div, comme la page de démonstration PixiJS.
https://pixijs.io/examples/#/demos-basic/container.js

Comme vous pouvez le voir, il est mis à l'échelle dans une partie de l'écran, pas dans tout l'écran.

De plus, la taille minimale de la toile est fixe, et je pense que c'est un très bel écran.

C'est l'idéal.

Merci.

C'est bien, mais il faudra attendre et voir avec un dev webMaster,
Je ne suis pas assez bon en FrontEnd pour vous répondre à ce sujet et moi aussi mon anglais est plutôt limité.
J'ai fait de mon mieux malheureusement et je suis limité par la barrière de la langue.

Vous pouvez également voir la page source de la démo utiliser Iframe pour diviser, vous devrez peut-être créer un DIV avec vos règles CSS et mettre Iframe avec id à l'intérieur et passer le nouvel identifiant de canevas à l'application pixi.

Pardon.

En d'autres termes, je ne souhaite pas afficher le canevas PixiJS en plein écran.

Par exemple, il y a un div en HTML. Supposons que vous y insérez le canevas PixiJS.
Supposons que le div soit 300 * 300 lorsque la fenêtre est ouverte en plein écran.
Au fur et à mesure que la fenêtre devient plus petite, elle sera mise à l'échelle avec le rapport 1: 1.

Certes, la démo est implémentée dans un iframe.
Au lieu de cela, je veux que cela fonctionne de la même manière dans un div HTML normal.

Comme une démo, pas en plein écran, mais dans le cadre de l'écran.

Merci.

Utilisez flexible.

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

La taille du canevas est toujours la même, elle est redimensionnée via CSS, le navigateur effectue la mise à l'échelle.

Au cas où vous voudriez un canevas avec un rapport pixel à pixel, vous devrez tout apprendre : css, les transformations pixi, comment redimensionner le canevas pixi, ce que fait pixi lorsque vous redimensionnez le canevas.

PixiJS est-il mis à l'échelle par CSS plutôt que par PixiJS lui-même ?

KonvaJS a fourni une méthode pour mettre à l'échelle la scène.

Je voudrais mettre en œuvre la même chose si possible

PixiJS est-il mis à l'échelle par CSS plutôt que par PixiJS lui-même ?

Il y a l'échelle de transformation de la scène, il y a le redimensionnement du canevas, et il y a les paramètres CSS largeur/hauteur et les options flex. Combinez-les pour que l'application évolue comme vous le souhaitez.

KonvaJS a fourni une méthode pour mettre à l'échelle la scène.

PixiJS ne concerne pas le redimensionnement des éléments, mais le rendu. le redimensionnement est facile. Je comprends que les gens en ont besoin pour commencer à créer des applications rapidement - eh bien, voici un exemple flexible! Tu veux plus? Tu dois apprendre. Sinon, vous serez coincé plus tard avec les mêmes problèmes mais à un niveau différent. Sans connaissance des transformations, vous ne pourrez pas positionner vos éléments et les faire pivoter autour de points.

Un autre problème est que personne n'a fait d'article sur les méthodes de redimensionnement, personne ! Les gens ont posé des questions à ce sujet, nous avons répondu, mais toujours pas un seul article !

Vous pouvez rechercher https://www.html5gamedevs.com/forum/15-pixijs/ pour les fils sur le redimensionnement, il y en a beaucoup.

Si vous faites un article, je le mettrai dans notre wiki: https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide

Je voudrais mettre en œuvre la même chose si possible

Porter le composant de redimensionnement Konva sur PixiJS est une bonne idée.

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

J'ai un écran KonvaJS qui peut faire un tel zoom et déplacer la scène en faisant glisser.

Je souhaite transférer ceci vers PixiJS.

Cependant, PixiJS a estimé que l'objet était complexe.

Quelqu'un pourrait-il écrire un exemple de code?

as-tu regardé https://github.com/davidfig/pixi-viewport ?

Je veux utiliser du PixiJS pur.
J'étais également très intéressé par PixiJS V5 et j'ai décidé de quitter KonvaJS.

Merci.

Cependant, il est similaire au zoom et au glissement que vous souhaitez obtenir.

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

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

J'ai travaillé dur sur PixiJS et essayé de créer une page qui se comporte de la même manière que la page que j'ai créée avec KonvaJS.

Cependant, cela ne fonctionne pas correctement.

PixiJS ne devrait-il pas monter sur scène ?

Fonctionnalités que je souhaite mettre en œuvre.
La taille de la toile est d'environ 800 * 800.
Lisez d'abord l'image et mettez-la sur la toile. Cependant, la taille de l'image varie de 8000 * 8000 à 6000 * 6000. (Le carré est fixe.)
・ Après avoir affiché l'image exactement à la taille de la toile, placez un grand nombre d'objets Pixi tels que des cercles et des personnages sur la scène.
・ Je veux zoomer et dézoomer avec la molette de la souris.
・ Après avoir effectué un zoom avant, faites glisser la position de la scène en faisant glisser. (Mais il ne sort pas de la fin de la scène.)

J'aimerais que vous regardiez le code source qui a été créé et que vous donniez des conseils.

OK, tu m'as donné assez d'informations, je vais regarder ça :)

window.addEventListener('redimensionner', redimensionner);

redimensionner ();
var w, h;
fonction redimensionner() {

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("canvas")

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

Je redimensionne en utilisant les codes ci-dessus. Aucun problème.

@dijitaletkinlikler
Je ne veux pas redimensionner.
J'essaye d'implémenter le zoom et le glisser.

Merci.

Désolé, votre exemple m'a donné un peu d'anxiété, car trop de gens attendent mon aide. J'ai parcouru le code à peine 1 minute, mais j'ai vu que vous aviez presque tout ce dont vous avez besoin, il vous suffit d'ajouter quelques exemples de mathématiques et d'expérience sous forme de pixi.

J'ai ce code pour déplacer les carrés: https://pixijs.io/examples/#/plugin -projection / basic.js, vous pouvez faire de même avec votre écran. Les problèmes de mise à l'échelle peuvent être résolus en utilisant les fonctions toLocal / toGlobal .

La résolution de cette tâche devrait également vous aider à l'avenir, les mêmes choses apparaîtront encore et encore lorsque vous utiliserez les transformations et l'interaction pixi.

Désolé, vous devez attendre que quelqu'un d'autre vous aide.

PS J'ai demandé à nos gars de slack d'aider au cas où quelqu'un serait libre

J'ai trouvé pixi-viewport une bibliothèque très attrayante et je l'ai examinée.

La documentation indique que c'est pour la v4, mais si vous vérifiez le problème, cela semble fonctionner correctement sur la v5.

Par conséquent, j'utiliserai pixi-viewport pour réaliser l'idéal.

Cependant, que je l'utilise mal, ou que v5 et pixi-viewport ne soient pas compatibles, cela ne fonctionne pas correctement.

Une fois ce problème résolu, je l'annoncerai ici.

De la même manière à l'avenir, quand quelqu'un est en difficulté.

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

J'ai pu résoudre ce problème en utilisant pixi-viewport.

PixiJS a une communauté bien développée et est très accommodante.

Je pense que cette bibliothèque est vraiment géniale.

Merci beaucoup.