BorderImage QML Type

Zeichnet einen Rahmen auf der Grundlage eines Bildes. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• asynchronous : bool
• border
  • border.bottom : int
  • border.left : int
  • border.right : int
  • border.top : int
• cache : bool
• currentFrame : int
• frameCount : int
• horizontalTileMode : enumeration
• mirror : bool
• progress : real
• retainWhileLoading : bool (since 6.8)
• smooth : bool
• source : url
• sourceSize : size
• status : enumeration
• verticalTileMode : enumeration

Ausführliche Beschreibung

Der Typ „BorderImage“ wird verwendet, um aus Bildern Rahmen zu erstellen, indem Teile der einzelnen Bilder skaliert oder gekachelt werden.

Ein „BorderImage“ unterteilt ein Quellbild, das über die Eigenschaft „ source “ angegeben wird, in 9 Bereiche, wie unten dargestellt:

Wenn das Bild skaliert wird, werden Bereiche des Quellbildes auf folgende Weise skaliert oder gekachelt, um das angezeigte Rahmenbild zu erzeugen:

• Die Ecken (Bereiche 1, 3, 7 und 9) werden überhaupt nicht skaliert.
• Die Bereiche 2 und 8 werden entsprechend der Eigenschaft „ horizontalTileMode “ skaliert.
• Die Bereiche 4 und 6 werden gemäß verticalTileMode skaliert.
• Die Mitte (Bereich 5) wird sowohl gemäß horizontalTileMode als auch gemäß verticalTileMode skaliert.

Die Bereiche des Bildes werden mithilfe der Eigenschaftsgruppe „ border “ definiert, die den Abstand von jeder Kante des Quellbildes angibt, der als Rand verwendet werden soll.

Anwendungsbeispiele

Die folgenden Beispiele zeigen die Auswirkungen der verschiedenen Modi auf ein Bild. Auf das Bild werden Hilfslinien eingeblendet, um die verschiedenen Bildbereiche wie oben beschrieben darzustellen.

Zum Vergleich wird ein nicht skaliertes Bild mithilfe eines einfachen „Image“-Elements angezeigt. Hier haben wir Linien eingeblendet, um zu zeigen, wie wir es mit „BorderImage“ aufteilen möchten:

Image {
    source: "pics/borderframe.png"
    anchors.centerIn: parent
}

Wird das Bild jedoch mit einem „BorderImage“ angezeigt, wird mithilfe der Eigenschaft „ border “ festgelegt, welche Teile des Bildes innerhalb der nicht skalierten Eckbereiche liegen und welche Teile horizontal und vertikal gestreckt werden. Anschließend können Sie eine Größe festlegen, die größer ist als das Originalbild. Da die Eigenschaft „ horizontalTileMode “ auf „ BorderImage.Stretch “ gesetzt ist, werden die Bildteile in den Bereichen 2 und 8 horizontal gestreckt. Da die Eigenschaft „ verticalTileMode “ auf „ BorderImage.Stretch “ gesetzt ist, werden die Bildteile in den Bereichen 4 und 6 vertikal gestreckt:

BorderImage {
    anchors { fill: parent; margins: 1 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Stretch
    verticalTileMode: BorderImage.Stretch
    source: "pics/borderframe.png"
}

Auch hier wird ein großes „BorderImage“ zur Darstellung des Bildes verwendet. Da die Eigenschaft „ horizontalTileMode “ auf „ BorderImage.Repeat “ gesetzt ist, werden die Bildabschnitte in den Bereichen 2 und 8 so nebeneinander angeordnet, dass sie den Platz am oberen und unteren Rand des Elements ausfüllen. Ebenso ist die Eigenschaft „ verticalTileMode “ auf „ BorderImage.Repeat “ gesetzt, sodass die Bildabschnitte in den Bereichen 4 und 6 so gekachelt werden, dass sie den Platz links und rechts des Elements ausfüllen:

BorderImage {
    anchors { fill: parent; margins: 1 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Repeat
    verticalTileMode: BorderImage.Repeat
    source: "pics/borderframe.png"
}

In manchen Fällen ist die Breite der Bereiche 2 und 8 möglicherweise kein exaktes Vielfaches der Breite der entsprechenden Bereiche im Quellbild. Ebenso ist die Höhe der Bereiche 4 und 6 möglicherweise kein exaktes Vielfaches der Höhe der entsprechenden Bereiche. Wenn Sie den Modus „ BorderImage.Round “ verwenden, wählt das System eine ganzzahlige Anzahl von Kacheln aus und verkleinert diese so, dass sie passen:

BorderImage {
    anchors { fill: parent; margins: 6 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Round
    verticalTileMode: BorderImage.Round
    source: "pics/borderframe.png"
}

Das Beispiel „BorderImage“ unter „Qt Quick -Beispiele – Bildelemente“ zeigt, wie ein „BorderImage“ verwendet werden kann, um einen Schatteneffekt auf einem rechteckigen Element zu simulieren.

Bildladen

Das Quellbild wird je nach seinem ursprünglichen Speicherort möglicherweise nicht sofort geladen. Der Ladefortschritt kann mit der Eigenschaft „ progress “ überwacht werden.

Siehe auch „ Image “ und „ AnimatedImage “.

Eigenschaftsdokumentation

asynchronous : bool

Legt fest, dass Bilder aus dem lokalen Dateisystem asynchron in einem separaten Thread geladen werden sollen. Der Standardwert ist „false“, wodurch der Benutzeroberflächen-Thread während des Ladens des Bildes blockiert wird. Die Einstellung „ asynchronous “ auf „true“ ist sinnvoll, wenn eine reaktionsschnelle Benutzeroberfläche wichtiger ist als die sofortige Anzeige der Bilder.

Beachten Sie, dass diese Eigenschaft nur für Bilder gilt, die aus dem lokalen Dateisystem gelesen werden. Bilder, die über eine Netzwerkressource (z. B. HTTP) geladen werden, werden immer asynchron geladen.

border group

Die 4 Rahmenlinien (2 horizontale und 2 vertikale) unterteilen das Bild in 9 Abschnitte, wie unten dargestellt:

Jede Begrenzungslinie (links, rechts, oben und unten) gibt einen Versatz in Pixeln vom jeweiligen Rand des Quellbildes an. Standardmäßig hat jede Begrenzungslinie den Wert 0.

Die folgende Definition legt beispielsweise die untere Linie 10 Pixel über dem unteren Bildrand fest:

BorderImage {
    border.bottom: 10
    // ...
}

Die Begrenzungslinien können auch mithilfe eines „ .sci file “ festgelegt werden.

cache : bool

Legt fest, ob das Bild zwischengespeichert werden soll. Der Standardwert ist „true“. Die Einstellung „ cache “ auf „false“ ist bei großen Bildern sinnvoll, um sicherzustellen, dass diese nicht auf Kosten kleiner Bilder von „UI-Elementen“ zwischengespeichert werden.

currentFrame ist der derzeit sichtbare Frame. Der Standardwert ist 0. Sie können einen Wert zwischen 0 und frameCount - 1 festlegen, um einen anderen Frame anzuzeigen, sofern das Bild mehrere Frames enthält.

frameCount ist die Anzahl der Frames im Bild. Die meisten Bilder haben nur einen Frame.

Diese Eigenschaft legt fest, wie die mittleren Bereiche des Rahmenbildes wiederholt oder gestreckt werden sollen.

Der Standard-Kachelmodus für jede Eigenschaft ist „ BorderImage.Stretch“.

mirror : bool

Diese Eigenschaft legt fest, ob das Bild horizontal gespiegelt werden soll (wodurch praktisch ein Spiegelbild angezeigt wird).

Der Standardwert ist „false“.

progress : real [read-only]

Diese Eigenschaft gibt den Fortschritt beim Laden des Bildes an, von 0,0 (noch nichts geladen) bis 1,0 (fertig).

Siehe auch status.

retainWhileLoading : bool [since 6.8]

Diese Eigenschaft legt das Verhalten fest, wenn die Eigenschaft „ source “ geändert wird und das Laden asynchron erfolgt. Dies ist der Fall, wenn die Eigenschaft „ asynchronous “ auf „ true “ gesetzt ist oder wenn sich das Bild nicht im lokalen Dateisystem befindet.

Wenn „ retainWhileLoading “ auf „ false “ gesetzt ist (Standardeinstellung), wird das alte Bild sofort verworfen und die Komponente geleert, während das neue Bild geladen wird. Bei der Einstellung „ true “ bleibt das alte Bild erhalten und sichtbar, bis das neue Bild bereit ist.

Durch Aktivieren dieser Eigenschaft lässt sich Flackern vermeiden, wenn das Laden des neuen Bildes lange dauert. Dies geht jedoch mit einem zusätzlichen Speicherbedarf für die Doppelpufferung einher, während das neue Bild geladen wird.

Diese Eigenschaft wurde in Qt 6.8 eingeführt.

smooth : bool

Diese Eigenschaft legt fest, ob das Bild beim Skalieren oder Transformieren glatt gefiltert wird. Eine glatte Filterung sorgt für eine bessere Bildqualität, kann jedoch auf manchen Hardwarekomponenten zu einer Verlangsamung führen. Wird das Bild in seiner natürlichen Größe angezeigt, hat diese Eigenschaft weder Auswirkungen auf die Darstellung noch auf die Leistung.

Standardmäßig ist diese Eigenschaft auf „true“ gesetzt.

source : url

Diese Eigenschaft enthält die URL, die auf das Quellbild verweist.

BorderImage Es können alle von Qt unterstützten Bildformate verarbeitet werden, die über jedes von Qt unterstützte URL-Schema geladen werden.

Diese Eigenschaft kann sich auch auf eine „ .sci “-Datei beziehen – ein QML-spezifisches, textbasiertes Format, das die Rahmenwerte, das Quellbild und die Kachelregeln direkt in der Datei einbettet. Bei Verwendung einer „ .sci “-Datei liest der „ BorderImage “ die Rahmeninformationen aus der Datei selbst aus, sodass die Angabe von Rahmeneigenschaften in QML nicht erforderlich ist.

Die folgende .sci-Datei legt für das Bild „ picture.png “ einen Rand von 10 auf jeder Seite fest:

border.left: 10
border.top: 10
border.bottom: 10
border.right: 10
source: "picture.png"

Die URL kann absolut oder relativ zur URL der Komponente sein.

Siehe auch QQuickImageProvider.

sourceSize : size [read-only]

Diese Eigenschaft enthält die tatsächliche Breite und Höhe des geladenen Bildes.

In „ BorderImage “ ist diese Eigenschaft schreibgeschützt.

Siehe auch „ Image::sourceSize “.

status : enumeration [read-only]

Diese Eigenschaft beschreibt den Status des Bildladevorgangs. Mögliche Werte sind:

Siehe auch progress.