Canvas2D QML Type

Stellt ein 2D-Canvas-Element bereit, das das Zeichnen über JavaScript ermöglicht. Mehr...

Dieser Typ befindet sich in der Technologievorschau und kann sich noch ändern.

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• available : bool
• context : object
• contextType : string

Signale

• imageLoaded()
• paint(rect region)
• painted()

Methoden

• void cancelRequestAnimationFrame(int handle)
• object getContext(string contextId, ... args)
• bool isImageError(url image)
• bool isImageLoaded(url image)
• bool isImageLoading(url image)
• void loadImage(url image, size sourceSize)
• void markDirty()
• int requestAnimationFrame(callback)
• void requestPaint()
• void unloadImage(url image)

Ausführliche Beschreibung

Das Canvas2D-Element ermöglicht das Zeichnen von geraden und gekrümmten Linien, einfachen und komplexen Formen, Diagrammen sowie referenzierten Grafiken. Außerdem können Text, Farben, Farbverläufe und Muster hinzugefügt werden.

Die Darstellung auf der Leinwand erfolgt über ein „ Canvas2DContext “-Objekt, in der Regel als Reaktion auf das Signal „ paint “.

Um einen Zeichenbereich im „Canvas2D“-Element zu definieren, legen Sie die Eigenschaften „ width “ und „ height “ fest. Der folgende Code erstellt beispielsweise ein „Canvas2D“-Element mit einem Zeichenbereich von 100 Pixeln Höhe und 200 Pixeln Breite:

import QtCanvas2D

Canvas2D {
    id: mycanvas
    width: 100
    height: 200
    onPaint: {
        var ctx = getContext("2d");
        ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
        ctx.fillRect(0, 0, width, height);
    }
}

Tipps zur Portierung bestehender HTML5-Canvas-Anwendungen

Obwohl das „Canvas“-Element eine HTML5-ähnliche API bereitstellt, müssen HTML5-Canvas-Anwendungen angepasst werden, damit sie im „Canvas“-Element ausgeführt werden können:

• Ersetzen Sie alle DOM-API-Aufrufe durch QML-Eigenschaftsbindungen oder Methoden des „Canvas“-Elements.
• Ersetzen Sie alle HTML-Ereignisbehandler durch das „ MouseArea “-Element.
• Ersetzen Sie setInterval-/setTimeout-Funktionsaufrufe durch das „ FrameAnimation “-Element oder die Verwendung von „ requestAnimationFrame()“.
• Platzieren Sie den Zeichen-Code im „ onPaint “-Handler und lösen Sie das Zeichnen durch Aufruf der Methoden „ markDirty()“ oder „ requestPaint()“ aus.
• Um Bilder zu zeichnen, laden Sie diese durch Aufruf der Methode „ loadImage()“ des Canvas und fordern Sie anschließend im „ onImageLoaded “-Handler das Zeichnen an.

Siehe auch „ Canvas2DContext “, „ QCanvasPainterItem “ und „ QCanvasPainter “.

Dokumentation zu den Eigenschaften

available : bool

Gibt an, wann Canvas einen Zeichenkontext zur Verfügung stellen kann, mit dem gearbeitet werden kann.

context : object

Enthält den aktiven Zeichenkontext.

Wenn die Zeichenfläche bereit ist und der Aufruf von ` getContext()` erfolgreich war oder die Eigenschaft ` contextType ` auf einen unterstützten Kontexttyp gesetzt wurde, enthält diese Eigenschaft den aktuellen Zeichenkontext, andernfalls `null`.

contextType : string

Der zu verwendende Zeichnungskontext.

Diese Eigenschaft wird auf den Namen des aktiven Kontexttyps gesetzt.

Wird sie explizit festgelegt, versucht die Leinwand, einen Kontext des genannten Typs zu erstellen, sobald dieser verfügbar ist.

Der Typname entspricht dem im Aufruf von ` getContext()` verwendeten Namen; für die 2D-Canvas lautet der Wert „2d“.

Siehe auch ` getContext()` und ` available`.

Signal-Dokumentation

imageLoaded()

Dieses Signal wird ausgelöst, wenn ein Bild geladen wurde.

Siehe auch loadImage().

paint(rect region)

Dieses Signal wird ausgelöst, wenn die „ region “ gerendert werden muss. Ist ein Kontext aktiv, kann über die Eigenschaft „context“ darauf verwiesen werden.

Dieses Signal kann durch „ markDirty()“, „ requestPaint()“ oder durch das Wechseln des aktuellen Canvas-Fensters ausgelöst werden.

painted()

Dieses Signal wird ausgelöst, nachdem alle Befehle zum Zeichnen des Kontexts ausgeführt und die Leinwand gerendert wurde.

Methodendokumentation

void cancelRequestAnimationFrame(int handle)

Diese Funktion hebt den Animations-Callback auf, auf den „ handle “ verweist.

object getContext(string contextId, ... args)

Gibt einen Zeichenkontext zurück oder „ null “, falls kein Kontext verfügbar ist.

Der Parameter „ contextId “ benennt den gewünschten Kontext. Der Eintrag „ Canvas2D “ gibt einen Kontext zurück, der den gewünschten Zeichenmodus implementiert. Nach dem ersten Aufruf von „getContext“ gibt jeder nachfolgende Aufruf von „getContext“ mit derselben „contextId“ dasselbe Kontext-Objekt zurück. Alle zusätzlichen Argumente (args) werden derzeit ignoriert.

Wenn der Kontexttyp nicht unterstützt wird oder zuvor von der Zeichenfläche ein anderer, inkompatibler Kontexttyp angefordert wurde, wird ` null ` zurückgegeben.

Canvas2D Unterstützt nur einen 2D-Kontext.

bool isImageError(url image)

Gibt „ true “ zurück, wenn das Laden von „ image “ fehlgeschlagen ist, andernfalls „ false “.

Siehe auch loadImage().

bool isImageLoaded(url image)

Gibt „true“ zurück, wenn das „ image “ erfolgreich geladen wurde und einsatzbereit ist.

Siehe auch loadImage().

bool isImageLoading(url image)

Gibt „true“ zurück, wenn „ image “ gerade geladen wird.

Siehe auch loadImage().

void loadImage(url image, size sourceSize = undefined)

Lädt das angegebene image asynchron.

Sobald das Bild bereitsteht, wird das Signal „ imageLoaded()“ ausgelöst. Das geladene Bild kann mit der Methode „ unloadImage()“ wieder entladen werden.

Wenn „ sourceSize “ angegeben ist, wird das Bild beim Laden auf diese Größe skaliert. Dies ist nützlich, um skalierbare (Vektor-)Bilder (z. B. SVGs) in ihrer vorgesehenen Anzeigegröße zu laden.

Siehe auch „ unloadImage()“, „ imageLoaded()“, „ isImageLoaded()“, „ Context2D::createImageData()“ und „ Context2D::drawImage()“.

void markDirty()

Markiert die Leinwand als „dirty“. Dadurch wird das Signal „ paint “ ausgelöst.

Siehe auch „ paint “ und „ requestPaint()“.

int requestAnimationFrame(callback)

Diese Funktion sorgt dafür, dass „ callback “ vor der Erstellung der Szene „ Qt Quick “ aufgerufen wird.

void requestPaint()

Fordern Sie an, dass der gesamte sichtbare Bereich neu gezeichnet wird.

Siehe auch markDirty().

void unloadImage(url image)

Lädt das „ image “ aus.

Sobald ein Bild entladen wurde, kann es vom Canvas-Kontext nicht mehr gezeichnet werden, es sei denn, es wird erneut geladen.

Siehe auch loadImage(), imageLoaded(), isImageLoaded(), Context2D::createImageData() und Context2D::drawImage.