Pixi.js: Ich möchte einen reaktionsschnellen Bildschirm wie eine Demo erstellen

Das Repo des Quellcodes für diese Demoseite finden Sie hier.
Sie haben mehrere Möglichkeiten, den Quellcode herunterzuladen.

https://github.com/pixijs/examples

Es tut uns leid,
Entschuldigen Sie mich. Das heißt nicht.

Ich möchte nicht den Democode selbst.

Wenn das Fenster auf der Seite, auf der der PixiJS-Democode bereitgestellt wird, vergrößert oder verkleinert wird, wird das Bild des Kaninchens im Inneren ebenfalls im gleichen Verhältnis skaliert.
https://pixijs.io/examples/#/demos -basic/container.js

Dies kann nicht einfach durch die Implementierung des Democodes erreicht werden.

Es tut mir leid, dass es schwer war, durchzukommen.

ho es ist nur ein CSS Tricks, wenn Sie nicht sicher sind, wie es funktioniert, können Sie auch js und listener verwenden, um die CSS zu hacken und den Bildschirm beim Größenänderungsereignis anzupassen.
Ich habe Ihnen hier ein Beispiel für die automatische Anpassung an den Bildschirm mit dem Verhältnis gemacht.
https://www.pixiplayground.com/#/edit/1vNMaYhaqi1 -JnwJ_0Y_m
Ist das eine Hilfe?

Das war's.

Ich habe früher das KonvaJS-Modul verwendet.
Durch Ändern der Skalierung des Bühnenobjekts konnte ich die Größe der Leinwand relativ ändern.

Ist es unmöglich, CANVAS selbst mit PixiJS zu skalieren und seine Größe zu ändern? Oder ist es nicht bedeutend?
Einige Bilder sind nicht sehr gut darin, sich auf CSS zu verlassen.

Dieser Artikel ist ein weiterer Ansatz und kann Ihnen ebenfalls helfen.
https://medium.com/@michelfariarj/scale -a-pixi-js-game-to-fit-the-screen-1a32f8730e9c

Vielen Dank. Dem Ideal sehr nahe.

Genau wie das Beispiel, das ich gefunden habe, breitet sich der Canvas von PixiJS jedoch über die gesamte Bildschirmgröße aus.

Ich möchte eine PixiJS-Komponente in einem div hinzufügen und die Größe ändern.

Mit anderen Worten, wie ich am Anfang geschrieben habe, möchte ich, anstatt die Leinwand so auszubreiten, dass sie den Bildschirm ausfüllt, sie in einem einzelnen Div vorstellen, wie z. B. der PixiJS-Demoseite.
https://pixijs.io/examples/#/demos -basic/container.js

Wie Sie sehen können, ist es in einem Teil des Bildschirms skaliert, nicht im gesamten Bildschirm.

Außerdem ist die Mindestgröße der Leinwand festgelegt, und ich denke, es ist ein sehr schöner Bildschirm.

Dies ist ideal.

Vielen Dank.

Es ist gut, aber es wird notwendig sein, mit einem webMaster-Entwickler abzuwarten
Ich bin nicht gut genug im FrontEnd, um Ihnen darauf zu antworten, und auch mein Englisch ist ziemlich begrenzt.
Ich habe leider mein Bestes gegeben und bin durch die Sprachbarriere eingeschränkt.

Sie können auch sehen, dass die Demo-Quellseite Iframe zum Aufteilen verwendet. Möglicherweise müssen Sie ein DIV mit Ihren CSS-Regeln erstellen und Iframe mit ID darin einfügen und die neue Canvas-ID an die pixi-App übergeben.

Es tut uns leid.

Mit anderen Worten, ich möchte den PixiJS-Canvas nicht im Vollbildmodus anzeigen.

Zum Beispiel gibt es ein div in HTML. Angenommen, Sie legen die PixiJS-Leinwand darin ab.
Angenommen, der div ist 300 * 300, wenn das Fenster im Vollbildmodus geöffnet wird.
Wenn das Fenster kleiner wird, wird es im Verhältnis 1:1 skaliert.

Natürlich ist die Demo in einem iframe implementiert.
Stattdessen möchte ich, dass dies in einem normalen HTML-Div gleich funktioniert.

Wie eine Demo, nicht als Vollbild, sondern als Teil des Bildschirms.

Vielen Dank.

Verwenden Sie Flex.

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

Die Leinwandgröße ist immer gleich, die Größe wird über CSS geändert, der Browser übernimmt die Skalierung.

Falls Sie eine Leinwand mit einem Pixel-zu-Pixel-Verhältnis wünschen, müssen Sie alles lernen: CSS, Pixel-Transformationen, wie man die Größe der Pixel-Leinwand ändert, was Pixel macht, wenn Sie die Größe der Leinwand ändern.

Skaliert PixiJS eher durch CSS als durch PixiJS selbst?

KonvaJS hat eine Methode zur Skalierung der Bühne bereitgestellt.

Das möchte ich nach Möglichkeit auch umsetzen

Skaliert PixiJS eher durch CSS als durch PixiJS selbst?

Es gibt eine Stage-Transformationsskala, eine Canvas-Größenänderung und CSS-Parameter für Breite / Höhe und Flex-Optionen. Kombinieren Sie sie, damit die App nach Ihren Wünschen skaliert.

KonvaJS hat eine Methode zur Skalierung der Bühne bereitgestellt.

Bei PixiJS geht es nicht darum, die Größe von Dingen zu ändern, sondern um das Rendern. die Größenänderung ist einfach. Ich verstehe, dass die Leute dies brauchen, um schnell Apps zu erstellen - nun, hier ist ein Flex-Beispiel! Lust auf mehr? Du musst lernen. Sonst steckst du später mit den gleichen Problemen fest, aber auf einer anderen Ebene. Ohne Kenntnisse über Transformationen können Sie Ihre Elemente nicht positionieren und um Punkte drehen.

Ein weiteres Problem ist, dass niemand einen Artikel über Methoden zur Größenänderung verfasst hat, niemand! Die Leute haben danach gefragt, wir haben geantwortet, aber immer noch kein einziger Artikel!

Sie können https://www.html5gamedevs.com/forum/15-pixijs/ nach Threads zur Größenänderung durchsuchen, es gibt viele.

Wenn Sie einen Artikel erstellen, stelle ich ihn in unser Wiki ein: https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide

Das möchte ich nach Möglichkeit auch umsetzen

Die Portierung der Konva-Größenänderungskomponente auf PixiJS ist eine gute Idee.

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

Ich habe einen KonvaJS-Bildschirm, der einen solchen Zoom machen und die Bühne durch Ziehen verschieben kann.

Ich möchte dies auf PixiJS übertragen.

PixiJS hielt das Objekt jedoch für komplex.

Könnte bitte jemand einen Beispielcode schreiben?

hast du dir https://github.com/davidfig/pixi-viewport angesehen ?

Ich möchte reines PixiJS verwenden.
Ich war auch sehr an PixiJS V5 interessiert und habe mich entschieden, von KonvaJS zu wechseln.

Vielen Dank.

Es ähnelt jedoch dem Zoomen und Ziehen, das Sie erreichen möchten.

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

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

Ich habe hart an PixiJS gearbeitet und versucht, eine Seite zu erstellen, die sich genauso verhält wie die Seite, die ich mit KonvaJS erstellt habe.

Es funktioniert jedoch nicht richtig.

Sollte PixiJS die Bühne nicht skalieren?

Funktionen, die ich implementieren möchte.
・ Die Größe der Leinwand beträgt etwa 800 * 800.
・ Lesen Sie zuerst das Bild und legen Sie es auf die Leinwand. Die Bildgröße variiert jedoch von 8000 * 8000 bis 6000 * 6000. (Das Quadrat ist fest.)
・ Nachdem Sie das Bild genau in der Größe der Leinwand angezeigt haben, platzieren Sie eine große Anzahl von Pixi-Objekten wie Kreise und Zeichen auf der Bühne.
・ Ich möchte mit dem Mausrad hinein- und herauszoomen.
・ Ziehen Sie nach dem Vergrößern die Bühnenposition durch Ziehen. (Aber es bewegt sich nicht über das Ende der Bühne hinaus.)

Ich möchte, dass Sie sich den tatsächlich erstellten Quellcode ansehen und Ratschläge geben.

OK, du hast mir genug Informationen gegeben, ich schaue mir das an :)

window.addEventListener('Größe ändern', Größe ändern);

Größe ändern ();
var w,h;
Funktion Größe ändern () {

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';
//Größe ändernHtmlElement();
}

const canvas =document.getElementById("canvas")

const app=neuer PIXI.CanvasRenderer({

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

})

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

var-Stufe = neuer PIXI.Container();

Ich ändere die Größe mit den obigen Codes. Kein Problem.

@dijitaletkinlikler
Ich möchte die Größe nicht ändern.
Ich versuche, Zoom und Drag zu implementieren.

Vielen Dank.

Entschuldigung, Ihr Beispiel hat mich etwas beunruhigt, weil zu viele Leute auf meine Hilfe warten. Ich habe den Code nur 1 Minute durchgesehen, aber ich habe gesehen, dass Sie fast alles haben, was Sie brauchen, Sie müssen nur ein paar mathematische und Erfahrungs-Pixel-Beispiele hinzufügen.

Ich habe diesen Code, um Quadrate zu verschieben: https://pixijs.io/examples/#/plugin -projection/basic.js , Sie können dasselbe mit Ihrem Bildschirm tun. Skalierungsprobleme können mit den Funktionen toLocal / toGlobal gelöst werden.

Auch das Lösen dieser Aufgabe sollte Ihnen in Zukunft helfen, es werden immer wieder dieselben Dinge auftreten, wenn Sie Pixi-Transformationen und Interaktionen verwenden.

Entschuldigung, Sie müssen warten, bis jemand anderes hilft.

PS Ich habe unsere Jungs in Slack gebeten, zu helfen, falls jemand frei ist

Ich fand pixi-viewport eine sehr attraktive Bibliothek und schaute hinein.

In der Dokumentation steht, dass es für v4 ist, aber wenn Sie das Problem überprüfen, scheint es auf v5 gut zu funktionieren.

Daher werde ich pixi-viewport verwenden, um das Ideal zu verwirklichen.

Ob ich es jedoch schlecht benutze oder v5 und pixi-viewport nicht kompatibel sind, es funktioniert nicht richtig.

Sobald das geklärt ist, werde ich es hier bekannt geben.

Ebenso in Zukunft, wenn jemand in Schwierigkeiten ist.

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

Ich konnte dieses Problem mit pixi-viewport lösen.

PixiJS hat eine gut entwickelte Community und ist sehr entgegenkommend.

Ich finde diese Bibliothek wirklich toll.

Vielen Dank.