Bilder auf Retina darstellen

Hi,

wie löse ich denn idealerweise die Darstellung von Bildern auf den verschiedenen Bildschirmen?

Im Moment mache ich es so, dass ich von allen Bildern 2 Versionen habe und sie dann so darstelle.

if ScalingFactor>1 then // Retina
  g.DrawPicture (pic@2,0,0,g.Width, g.Height, 0, 0, pic@2.Width, pic@2.Height)
else
  g.DrawPicture pic,0,0
end if

Ganz konkret geht es um eine neue App, an der ich gerade dran sitze, dort sollen Bilder bildschirmfüllend dargestellt werden, sofern sie groß genug. Sind sie kleiner wird es zentriert auf dem Schirm angezeigt in der maximalen Größe.
Wäre es denn hier nicht sinnvoller ein jpg mit einer höheren dpi Zahl zu verwenden, zB 144 dpi, dann bräuchte ich doch nur 1 Bild, das dann auf allen Geräten gut aussieht oder?

Es kommt auf den Skalierungs-Algorithmus an. Der von Xojo ist nicht der beste. Auerdem schrfe ich beim Verkleinern immer nach.

Ok, es geht hier nicht um eine Foto-App, will damit sagen, es kommt nicht darauf an ob es bessere Algorithmen gibt.

Ich frage mich nur. bekomme ich mit einem Bild in 300 dpi alle Bildschirme abgedeckt und habe ein scharfes Bild?
Kann Xojo überhaupt mit 300dpi Bildern umgehen oder werden die immer in 72 dpi angezeigt?

Bei mir klappt das mit den @x2 Grafiken und Scalefactor ganz gut. Etwas nachschrfen musste ich bisher nie, erstelle die Grafiken aber auch mit einem Vektorprogramm und exportiere dann direkt in die passenden Gren. Auf eine Sache musst Du aber in Xojo aufpassen:

Auf Systemen mit mehreren Bildschirmen (z.B. Macbook Pro Retina und einem externen, normalen Bildschirm) musst Du die Abfrage in die .Moved bzw. .Restored Events des Fenstern mit rein packen. Sonst wird Dir dann das hochaufgelste Bild auf dem Nicht-Retina Display (dann natrlich zu gro und abgeschnitten) angezeigt oder umgekehrt.

sieht so aus, als könne Xojo mit 300dpi Bildern umgehen, d.h. ich kann auf die @x2 Bilder verzichten…

Ja perfekt, man kann ein jpg mit 144 dpi nehmen, damit hat man die @x2 Geschichte umgangen und spart ein Bild ein. Nimmt man 300 dpi kann man auch zukünftige 7K Bildschirme bedienen (-:
Allerdings wird meine Mini-App mit 50 Bildern dann gigantisch…

Was würde denn passieren, wenn ich die Auflösung der von mir verwendeten Grafiken von 72 dpi auf 144 dpi erhöhe,
sieht es dann beispielsweise auf einen @x2-Bildschirm “besser” aus? Läßt sich so dann die @x2-Geschichte umgehen?

Ja genau, sie lsst sich damit umgehen, es gibt dabei aber zu beachten:

  1. Einfach ein Bild von 72 auf 144 zu ndern zB in PS, verdoppelt zwar die Dichte, aber das muss dann nicht schrfer werden, es fehlen ja die Bildinformationen. Anders herum gesagt, ffne also das @x2 Bild in PS, halbiere die Gre und setze dpi auf 144, dann hast du das, was ich oben beschrieben habe.
    Wenn du ein Bild neu erstellst, um was reinzumalen, dann setze es gleich auf 144 dpi

  2. du musst das Bild immer so in das Canvas malen, damit das klappt:

    if ScalingFactor>1 then // Retina
    g.DrawPicture (pic,x,y,pic.Width/2,pic.Height/2,0,0,pic.Width,pic.Height)
    else
    g.DrawPicture pic,x,y
    end if

Wenn ich in GraphicConverter, der Anwendung, die ich verwende, die Dichte verdoppele (72 → 144), habe ich automatisch auch eine doppelt so hohe Auflösung in Pixel.

Ich sehe in der if ScalingFactor>1-Zeile die Argumente pic.width/2 und pic.Heigth/2,
die bedeuten, daß das 144-er Bild auf die Hälfte skaliert wird.

Letztlich soll es dadurch genausogroß dargestellt werden wie das 72-er Bild in seiner Originalgröße.

Im angesprochenen GraphicConverter funktioniert es nur auf die von dir beschriebene Vorgehensweise, also erst zu halbieren, dann dpi auf 144 zu setzen.
Wenn ich es anders herum mache (erst auf 144 erhöhen, dann halbieren), dann habe ich am Ende wieder 72 dpi.

Danke für die oben geschriebenen Codezeilen, denn die muß ich mir für die Zukunft merken.

Ich würde dir raten, mal in AppWrapper http://www.ohanaware.com/appwrapper/ zu schauen, oder deine Bilder als NSImage via MacOSLib oder MBS zu verwalten. Der schlechtere Skalierungsalgorithmus von Xojo macht sich nämlich extrem bei den Verkleinerungen bemerkbar. Wenn du ein x2-Bild nimmst und mit Xojo-Bordmitteln runterskalierst, verliert es auch mit Nachschärfen reichlich an Qualität – im Endeffekt bleibt einem dann nicht viel anderes, als doch zwei optimierte Bilder mitzuschleifen.
Mit den Skalierungsmethoden von NSImage kannst du sogar ein App-Icon auf Menüzeilengröße skalieren und es sieht immer noch scharf und ansehnlich aus. Irgendwo hatte ich dazu mal Bilder – ich schau mal, ob ich den Vergleich noch finde …

EDIT: Ja, hier: https://forum.xojo.com/16089-much-better-macoslib-nsimage-picture-conversion-quality

AppWrapper nutze ich bereits, vor allem, um Hilfe-Dateien, Programmkategorie und (nun auch) Codesignierung reinzubringen.
Bei der Gelegenheit habe ich auch den RetinaKit mitbezahlt und sollte mir den mal nher ansehen.

Zwei Bilder zu verwenden, sehe ich als die sicherere Methode an.