Über unsMediaKontaktImpressum
Elena Bochkor & Dr. Veikko Krypczyk 29. Oktober 2024

Grafiken in höchster Qualität und mit maximaler Performance

Integration der 2D-Grafikbibliothek Skia in die Entwicklungsumgebung RAD Studio

Mit der Veröffentlichung von RAD Studio 12 wurde die leistungsstarke Skia-Grafikbibliothek direkt in die Entwicklungsumgebung integriert. Skia bietet verbesserte Möglichkeiten für modernes, plattformübergreifendes Grafik-Rendering, das insbesondere durch eine hardwarebeschleunigte Darstellung und umfassende User-Interface-Verbesserungen überzeugt [1]. In diesem Artikel beleuchten wir die Integration und zeigen, wie neue und bestehende Applikationen von Skia profitieren können.

RAD Studio ist eine integrierte Entwicklungsumgebung (IDE), die eine schnelle Erstellung von plattformübergreifenden Anwendungen ermöglicht. Sie unterstützt die Programmiersprachen Delphi (basierend auf Object Pascal) und C++. RAD Studio bietet zwei Frameworks für die Benutzeroberflächenentwicklung. Die Visual Component Library (VCL) ist für die Entwicklung von Windows-Anwendungen ausgelegt. FireMonkey (FMX) ist ein plattformübergreifendes GUI-Framework, das die Entwicklung von Anwendungen für Windows, macOS, Linux, iOS und Android ermöglicht [2]. Es bietet flexible Designs und moderne Grafikfunktionen. In RAD Studio Version 12 wurde Skia4Delphi, eine leistungsfähige 2D-Grafikbibliothek integriert [3]. Diese basiert auf der Open-Source-Bibliothek Skia und wurde speziell für Delphi angepasst. Sie ermöglicht plattformübergreifendes Rendering und die Manipulation von Grafiken und Texten.

Motivation für die Nutzung von Skia in RAD-Studio-Anwendungen

Die Integration von Skia in RAD Studio hat das Ziel, die Qualität und Leistung von Zeichnungen weiter zu steigern und neue grafische Funktionen zur Verfügung zu stellen, um eine verbesserte Benutzererfahrung zu bieten. Skia funktioniert plattformübergreifend auf Desktop- und Mobilgeräten. Die Skia-API unterstützt die Erstellung und Darstellung von 2D-Zeichnungen, SVG, verschiedene Bildformate (BMP, JPG, PNG, GIF etc.) und die Manipulation von Grafikpfaden, Formen und Texten. Darüber hinaus werden animierte Bildformate wie Lottie-Animationen, animierte GIF und WebP-Dateien unterstützt, was die grafischen Möglichkeiten der Entwicklungsumgebung erweitert. Ein herausragendes Merkmal von Skia ist das hardwarebeschleunigte Rendering, das durch die Nutzung der GPU erhebliche Leistungssteigerungen ermöglicht. Dies führt zu flüssigen Animationen und einer insgesamt verbesserten Grafikqualität, insbesondere bei aufwändigen Anwendungen. Zudem unterstützt Skia fortschrittliche Rendering-Techniken wie Anti-Aliasing, wodurch gezackte Kanten geglättet und hochqualitative Grafiken erzeugt werden. Skia erleichtert auch die Handhabung komplexer Schriftsätze und unterstützt Texte in Sprachen, die von rechts nach links gelesen werden (RTL-Sprachen wie Arabisch und Hebräisch).

Einfache Integration in RAD Studio

Skia ist nahtlos in RAD Studio integriert und unterstützt sowohl die VCL (Windows-spezifisch) als auch FMX (plattformübergreifend). Über die Projekteigenschaften kann die Verwendung der Bibliothek in einer Applikation direkt in der IDE aktiviert werden (Bild 1).

Die Bibliothek besteht im Wesentlichen aus drei Komponenten:

  • Skia API: Ermöglicht den Zugriff auf die Skia-Bibliothek über die Unit Skia.pas für VCL und FMX.
  • Steuerelemente: Für VCL und FMX stehen spezielle Steuerelemente zur Verfügung, wie z. B. TSkAnimatedImage für animierte Bilder und TSkLabel für fortgeschrittene Textstile. Außerdem kann über TSkPaintBox direkt mit der Skia-API auf Steuerelementen gezeichnet werden.
  • App-Rendering: Mit einer einzigen Codezeile kann das gesamte Rendering einer bestehenden oder neuen FireMonkey-Anwendung von der Skia-Engine übernommen werden. Dadurch verbessern sich die Zeichenqualität und Performance erheblich, ohne dass umfangreiche Änderungen im Code erforderlich sind.

In den kommenden Textabschnitten werden die Möglichkeiten und Vorteile des Einsatzes der Skia4Delphi-Bibliothek genauer betrachtet.

Visuelle Controls für VCL und FMX

Die Skia4Delphi-Bibliothek stellt einige Steuerelemente (visuelle Controls) sowohl für VCL als auch für FMX bereit (Abb. 2).

TSkAnimatedImage: Dieses Steuerelement ermöglicht das Laden und Abspielen animierter Bilder wie Lottie-Animationen, Telegram-Sticker, animierte GIFs und WebP-Animationen. Es bietet eine einfache Möglichkeit, hochwertige Vektor- und Rasteranimationen in Delphi- und C++-Anwendungen zu integrieren. Das sieht beispielsweise wie folgt aus:

  var LAnimatedimage := TSkAnimatedImage.Create(Self);
  LAnimatedimage.LoadFromFile('Samples\Demo\Assets\rocket.json');
  LAnimatedimage.Parent := Self;

Zur Anzeige kommt eine Lotti-Animation.

TSkLabel: Der TSkLabel ist ein vielseitiges Text-Steuerelement, das mehrere Textstile in einem einzigen Label unterstützt. Es ermöglicht das Ändern von Schriftarten, Schriftstärken, Textausrichtungen sowie das Anwenden von speziellen Dekorationen und Hintergrundfarben auf einzelne Textteile. Zudem können Sie automatische Größenanpassungen und Zeilenbeschränkungen vornehmen (Abb. 3).

TSkPaintBox: Dieses Steuerelement bietet direkten Zugriff auf die Skia-API und ermöglicht es, benutzerdefinierte Grafiken direkt im OnDraw-Ereignis zu rendern. Dies erlaubt eine flexible, hardwarebeschleunigte Grafikgestaltung innerhalb eines Steuerelements. Es steht gewissermaßen die gesamte Leistungsfähigkeit der Skia-Bibliothek in einem visuellen Control zur Verfügung.

TSkSvg (VCL und FMX): Mit diesem Steuerelement können SVG-Dateien einfach geladen und gerendert werden. Es bietet auch die Möglichkeit, SVG-Icons zu färben und Skalierungen durchzuführen, was ideal für moderne UI-Designs ist, die auf vektorbasierte Symbole setzen.

Diese Skia-Steuerelemente bringen völlig neue grafische Möglichkeiten in eine Anwendung, verbessern die Qualität der Darstellung und führen auch zu einer höheren Performance, indem sie hardwarebeschleunigtes Rendering nutzen und konsistente plattformübergreifende Unterstützung bieten. Die nahtlose Integration dieser Steuerelemente in VCL und FMX erleichtert es, moderne und effiziente Benutzeroberflächen für Multimedia-Apps und grafisch reichhaltige Anwendungen zu erstellen.

Leistungsfähigeres Rendering der UI für FMX-Applikationen

Mit der Skia4Delphi-Bibliothek ist es möglich, die Grafik-Engine von FMX zu überschreiben, sodass Skia als Standard-Canvas verwendet wird. Dadurch erhält Ihre FMX-Anwendung automatisch folgende Verbesserungen:

  • Zeichnen mit Anti-Aliasing auf allen Plattformen
  • Eine Steigerung der allgemeinen Grafikleistung um bis zu 50 Prozent, selbst bei höherer Zeichenqualität
  • Bessere Bildskalierung
  • Unterstützung für Textwiedergabe von rechts nach links (right-to-left)
  • Behebung von zahlreichen Inkonsistenzen in Zeichnungen, insbesondere an Ecken und Strichen, wie etwa bei gestrichelten Linien, sowie bei Texten mit speziellen Emojis
  • Eine generelle Leistungssteigerung der grafischen Darstellung, beispielsweise bei Steuerelementen.

Die erreichbaren Leistungssteigerungen sind von der Zielplattform, den grafischen Anforderungen und den Zielgeräten abhängig. In Business-Applikationen auf einem Desktop-PC werden die Unterschiede weniger groß ausfallen. Multimedia-Applikationen auf mobilen Devices werden von den Geschwindigkeitsvorteilen mehr profitieren. Benchmarks zeigen, dass die Nutzung von Skia in RAD Studio zu signifikanten Leistungssteigerungen führt. In Tests mit verschiedenen Geräten, darunter PC, Macs und mobilen Geräten, konnte eine Performance-Steigerung von bis zu 50 Prozent gegenüber der nativen FMX-Engine gemessen werden. Diese Verbesserung resultiert vor allem aus der optimierten Nutzung der GPU und der effizienteren Verarbeitung von Zeichenoperationen (Abb. 4).

Features

Durch die Integration von Skia in RAD Studio ergeben sich eine Reihe neuer Möglichkeiten (Features). Dazu zählen u. a. (Abb. 5):

  • Shapes: Skia4Delphi unterstützt das Zeichnen von Formen wie Rechtecken, Kreisen und komplexen Pfaden. Es bietet dabei Anti-Aliasing für glatte Kanten sowie unterschiedliche Füll- und Linienstile.
  • Text Rendering: Die Bibliothek ermöglicht eine hochwertige Textdarstellung mit Anti-Aliasing und Unterstützung für benutzerdefinierte Schriftarten. Es unterstützt auch Sprachen, die von rechts nach links geschrieben werden, wie Arabisch und Hebräisch.
  • Pfad-Effekte: Mithilfe von diskreten, zusammengesetzten und Summen-Pfaden können dekorative und komplexe Linienmuster erstellt werden. Dies erhöht die visuelle Flexibilität bei der Gestaltung.
  • Shaders: Skia ermöglicht es, Farbverläufe und andere Shader-basierte Effekte zu nutzen, was erweiterte visuelle Darstellungen und Designs ermöglicht.
  • PDF-Erstellung: Die Bibliothek erlaubt das Erstellen von PDF-Dokumenten, in die SVG-Dateien und andere Grafiken eingebettet werden können.
  • Codecs: Es werden eine Vielzahl von Bildformaten für das Dekodieren und Kodieren unterstützt. Es werden Formate wie BMP, GIF, ICO, JPEG, PNG sowie viele Raw-Bildformate von Kameras, beispielsweise Canon, Nikon, Sony für das Decodieren unterstützt. Bilder können in die Formate JPEG, PNG und WebP kodiert werden.

Diese Kombination aus erweiterten Grafikfunktionen und breiter Bildunterstützung macht Skia4Delphi zu einer interessanten Option für die Wahl von grafisch anspruchsvollen Applikationen auf der Basis von Delphi oder C++.

Jede Plattform hat ihre eigenen Anforderungen an Bildelementen (Icons, Splash Screen usw.). Dabei müssen diese Bilder in unterschiedlichen Auflösungen erstellt und mit einer bestimmten Konvention für die jeweilige Plattform bereitgestellt werden. Der in Delphi 12 enthaltene Multi Device Icon Generator basiert auf Skia und ermöglicht es, dass man nach Auswahl einer Bildquelle und manuellen Anpassungen (Zoom, Hintergrund) automatisiert die notwendigen Bildelemente für alle relevanten Plattformen generieren kann (Abb. 6).

Dieses integrierte Tool erleichtert die Arbeit maßgeblich und führt zu einer deutlichen Vereinfachung der finalen Arbeiten für eine finale Bereitstellung der Applikationen auf den Zielsystemen.

Exkurs: Wichtige hier verwendete Begriffe rund um die Grafik-Darstellung

Das Lottie-Animationsformat ist ein leichtgewichtiges, vektorbasiertes Format, das Animationen in Apps und Websites ermöglicht. Es basiert auf JSON, wodurch Animationen in sehr kleinen Dateigrößen gespeichert werden, was im Vergleich zu GIFs deutlich effizienter ist. Da es vektorbasierte Grafiken nutzt, können Lottie-Animationen verlustfrei skaliert werden, was sie ideal für unterschiedliche Bildschirmgrößen macht. Sie werden häufig für UI-Animationen und interaktive Grafiken verwendet und bieten eine plattformübergreifende Unterstützung.

Anti-Aliasing ist eine Technik in der Computergrafik, die verwendet wird, um gezackte oder treppenartige Kanten, sogenannte Aliasing-Artefakte, in Bildern zu glätten. Diese Artefakte entstehen, wenn diagonale oder geschwungene Linien auf einem Raster von Pixeln dargestellt werden, was insbesondere bei niedrigen Auflösungen auffällt. Anti-Aliasing reduziert diese Effekte, indem es die Übergänge zwischen verschiedenen Farben entlang der Kanten weicher macht. Dies wird erreicht, indem die Kantenpixel durch eine Mischung der Farben der angrenzenden Objekte "gefärbt" werden, sodass die Kante weniger abrupt und damit glatter erscheint.

Das WebP-Format ist ein modernes Bildformat. Es zeichnet sich durch eine höhere Kompressionseffizienz aus, d. h. verlustfreie WebP-Bilder sind bis zu 26 Prozent kleiner als PNGs und verlustbehaftete WebP-Bilder 25-34 Prozent kleiner als JPEGs – bei vergleichbarer Bildqualität.

Zusammenfassung

Die Integration von Skia in RAD Studio bringt einige Vorteile im Bereich der grafischen Darstellung einher. Durch die plattformübergreifende Unterstützung, das hardwarebeschleunigte Rendering und die hohe Grafikqualität ermöglicht Skia die Erstellung moderner und grafisch reichhaltiger Anwendungen, welche mit einer guten Performance auf den Zielplattformen ausgeführt werden. Skia4Delphi ist einfach einzusetzen und kann für Applikationen mit einem Mausklick direkt in der IDE aktiviert werden. In diesem Fall wird das Standard-Rendering von FMX durch die leistungsfähigere Variante von Skia ersetzt. Für spezielle grafische Herausforderungen, wie Animationen, welche auf dem Lotti-Format basieren, Textdarstellungen mit einem mehrfachen Styling oder flüssig darzustellenden Transformationen von Grafiken und geometrischen Primitiven stehen spezielle visuelle Controls zur Verfügung bzw. kann die Skia-API direkt aus dem Delphi- bzw. C++-Quellcode angesprochen werden.

Quellen
  1. Skia
  2. embarcadero: Skia in FireMonkey
  3. Skia4Delphi
    Github: skia4delphi
Autor:innen

Elena Bochkor

Elena Bochkor arbeitet am Entwurf und Design mobiler Anwendungen und Webseiten. Trainings und Workshops zu diesen Themen können Sie über die Webseite anfragen und die Agenda vorab einsehen.
>> Weiterlesen

Dr. Veikko Krypczyk

Dr. Veikko Krypczyk ist Softwareentwickler, Trainer und Fachautor und u.a. auf die Themen WinUI 3 und .NET MAUI spezialisiert.
>> Weiterlesen
Das könnte Sie auch interessieren
Kommentare (0)

Neuen Kommentar schreiben