Wie soll ich erstellen eine ansprechende Leinwand mit createJs, um an verschiedenen mobile-Gerät die Bildschirme?

Ich bei der Entwicklung einer html5-mobile-Spiel. Wie Sie wissen, die Bildschirme von mobilen Geräten sind unterschiedlich groß, so dass ich möchten, erstellen Sie eine ansprechende Leinwand, so dass es anpassen kann, anderen Bildschirm.

InformationsquelleAutor Jospehus Chou | 2015-02-11
  1. 8

    Ist der einfachste Weg, um die Größe Ihrer Leinwand mit JavaScript, basierend auf den viewport, und dann reflow-Inhalte.

    var w = $("#container").width();
var h = $("#container").height();

stage.canvas.width = w;
stage.canvas.height = h;

//Simple "fit-to-screen" scaling
var ratio = contentWidth / contentHeight; //Use the "default" size of the content you have.
var windowRatio = w/h;
var scale = w/contentWidth;
if (windowRatio > ratio) {
    scale = h/contentHeight;
}
content.scaleX = content.scaleY = scale;

    Hier ist ein einfaches Beispiel. Es ist ein bisschen anders als der sample-code zu machen, arbeiten in einer Größenänderung Fenster. http://jsfiddle.net/lannymcnie/4yy08pax/

    Wenn Sie sind den Umgang mit mobilen Geräten, gibt es einige andere Dinge zu beachten, (Sie die auto-Skalierung Leinwände zur Rechenschaft für Ihre high-DPI).

    Hoffe, das hilft.

    • Ich danke Ihnen sehr!
    • Was ist, wenn Sie mehrere Formen? Wie kann man die contentWidth / contentHeight des einzelnen?
    • Wollen Sie die Größe jedes element, um den Bildschirm passen? Im Idealfall müssen Sie nur ein einziges Stück von Inhalten, die Sie skalieren, und Sie kennen die "Standard" - Größe, die Inhalte, die Sie verwenden in den Ansatz oben. Das Beispiel verwendet die exportRoot, denn es hat eine Nominale Größe, die es erstellt wurde, an.
    • Ich sehe, was du meinst. Stellen Sie sich vor Ihre Fenster, oder Inhalte, die Fläche von 500 x 300. Sie halten, dass in contentWidth / contentHeight - da brauchen Sie nur zu berechnen, das Verhältnis!! Vielen Dank für Ihre Antwort.
    • Konnte ich nicht nur die Größe ändern die gesamte Bühne statt, mit einem anderen content-Ebene?
    • Größenänderung der Bühne hat einige mögliche Nebenwirkungen. Ich empfehle einen sub-container. Es ist fast kein Aufwand (eine zusätzliche Kontext-Transformation), und Sie können weiterhin visualisieren Sie Ihre Bühne als eine Darstellung des canvas-Bereichs.
    • in diesem Fall ist das DOM-element umschließt, die die Leinwand /Bühne und dann "Inhalt" ist eine tatsächliche easeljs Container-Objekt, das ein Kind von der Bühne, richtig?
    • danke Mann

    InformationsquelleAutor Lanny
Schreibe einen Kommentar