9 Patch Editor - Ein Online-WYSIWYG-Tool zum Erstellen von 9-Patch-Bildern
Der 9 Patch Editor ist ein Online-WYSIWYG-Tool, ähnlich dem in Android Studio enthaltenen. Das Tool ermöglicht es Ihnen, Bitmap-Bilder zu erstellen, die sich automatisch an den Inhalt der Ansicht und die Bildschirmgröße anpassen. Sie können ausgewählte Teile des Bildes horizontal oder vertikal basierend auf im Bild gezeichneten Indikatoren skalieren.
Verwendung
Folgen Sie diesen Schritten, um eine NinePatch-Grafik mit dem 9 Patch Editor zu erstellen. Sie benötigen ein Bild, aus dem Sie ein NinePatch-Bild erstellen möchten.
- Klicken Sie auf die Schaltfläche Bild auswählen oder ziehen Sie das Bild, aus dem Sie ein NinePatch-Bild erstellen möchten, in den Editor.
Im geöffneten Arbeitsbereich ist der mittlere Bereich Ihr Zeichenbereich, in dem Sie die Linien für die dehnbaren Patches und den Inhaltsbereich bearbeiten können. Der rechte Bereich ist der Vorschaubereich, in dem Sie Ihre Grafik im gedehnten Zustand vorschauen können.
- Ändern Sie den Bildnamen für Ihr NinePatch-Bild. Ihr Bild wird mit der Dateierweiterung .9.png gespeichert.
- Klicken Sie innerhalb des 1-Pixel-Umfangs, um die Linien zu zeichnen, die die dehnbaren Patches und (optional) den Inhaltsbereich definieren.
- Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Bild speichern, um Ihre Änderungen zu speichern.
Abbildung 1. 9 Patch Editor mit Anzeige eines NinePatch-Bildes.
Um sicherzustellen, dass Ihre NinePatch-Grafiken ordnungsgemäß verkleinert werden, überprüfen Sie, ob alle dehnbaren Bereiche mindestens 2x2 Pixel groß sind. Andernfalls können diese Bereiche beim Verkleinern verschwinden. Um Interpolation während der Skalierung zu vermeiden, die zu Farbänderungen an den Grenzen führen kann, stellen Sie 1 Pixel zusätzlichen Sicherheitsabstand in der Grafik vor und nach dehnbaren Bereichen bereit.
Hinweis: Eine normale PNG-Datei (*.png) wird mit einem leeren 1-Pixel-Rand um das Bild herum geladen. Sie können die dehnbaren Patches und den Inhaltsbereich innerhalb des Rands zeichnen. Eine zuvor gespeicherte NinePatch-Datei (*.9.png) wird unverändert geladen, da der Zeichenbereich bereits existiert.
Optionale Steuerungen
- Zoom: Passen Sie die Zoomstufe der Grafik im Zeichenbereich an.
- Patch-Skalierung: Passen Sie die Skalierung der Bilder im Vorschaubereich an.
- Sperre anzeigen: Visualisieren Sie den nicht zeichenbaren Bereich der Grafik beim Überfahren mit der Maus.
- Patches anzeigen: Vorschau der rosa dehnbaren Patches im Zeichenbereich. Rosa zeigt einen dehnbaren Patch an, wie in Abbildung 2 gezeigt.
- Inhalt anzeigen: Heben Sie den Inhaltsbereich in den Vorschaubildern hervor. Violett zeigt den Bereich an, in dem Inhalt erlaubt ist, wie in Abbildung 2 gezeigt.
- Fehlerhafte Patches anzeigen: Fügt einen roten Rand um Patch-Bereiche hinzu, die beim Dehnen Artefakte in der Grafik erzeugen können, wie in Abbildung 2 gezeigt. Wenn Sie alle fehlerhaften Patches beseitigen, behalten Sie die visuelle Kohärenz Ihres gedehnten Bildes bei.
Abbildung 2. Ein NinePatch-Bild im Editor mit Anzeige von Inhalt, Patches und fehlerhaften Patches.