Nicht-Retina-Leinwand-App auf Retina-Display aktualisieren

Question

Ich habe eine iPad 2 Leinwand App (Spiel) und möchte es auf dem neuen iPad Retina-Display laufen zu lassen.

Einfach gesagt, was ist die beste Methode, um mein iPad2 Bild für Retina iPad Modelle zu strecken/schrumpfen?

Aus dem Googling habe ich gemacht, ich habe verschiedene Methoden gesehen, aber viele haben angefangen mit Retina-Größe Bilder und Skalierung getan.

Ich habe auch gehört, dass die Leistung des Retina Qualität Pixel auf den Bildschirm schieben ist langsam, und dass es besser ist, iPad-Größe Bilder auf Kosten einiger Qualität zu verwenden.

Wie es jetzt ist, auf den neuen iPad sehe ich das linke obere Viertel meiner app, was Sinn macht, aber die Leistung ist schockierend im Vergleich zu iPad 2.

Techniken Ich habe umfassen Abfragen CSS Medien gesehen unter Verwendung der Pixeldichte und CSS-Transformationen - die anscheinend ziemlich schnell sind.

Dank

Answer 1

Ich habe eine einfache Funktion zusammen, dieses Problem zu behandeln. Im Grunde nimmt es die aktuelle Leinwandgröße und skaliert sie durch das Gerät-Pixel-Verhältnis, schrumpft es mit CSS zurück. Dann skaliert es den Kontext nach dem Verhältnis, so dass alle Ihre ursprünglichen Funktionen wie gewohnt funktionieren.

Sie können es ausprobieren und sehen, wie die Leistung geht. Wenn es nicht das ist, was Sie erhofft haben, können Sie es einfach entfernen.

function enhanceContext(canvas, context) { 
    var ratio = window.devicePixelRatio || 1, 
     width = canvas.width, 
     height = canvas.height; 

    if (ratio > 1) { 
     canvas.width = width * ratio; 
     canvas.height = height * ratio; 
     canvas.style.width = width + "px"; 
     canvas.style.height = height + "px"; 
     context.scale(ratio, ratio); 
    } 
}