PinchHandler QML Type

Handler für Pinch-Gesten. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder
• Veraltete Elemente

Eigenschaften

• acceptedDevices : flags
• acceptedModifiers : flags
• acceptedPointerTypes : flags
• active : bool
• activeRotation : real
• activeScale : real
• activeTranslation : point
• centroid : QtQuick::handlerPoint
• cursorShape : Qt::CursorShape
• dragThreshold : int
• enabled : bool
• grabPermissions : flags
• margin : real
• parent : Item
• persistentRotation : real
• persistentScale : real
• persistentTranslation : point
• rotationAxis
  • rotationAxis.activeValue : real
  • rotationAxis.enabled : bool
  • rotationAxis.maximum : real
  • rotationAxis.minimum : real
• scaleAxis
  • scaleAxis.activeValue : real
  • scaleAxis.enabled : bool
  • scaleAxis.maximum : real
  • scaleAxis.minimum : real
• target : Item
• xAxis
  • xAxis.activeValue : real
  • xAxis.enabled : bool
  • xAxis.maximum : real
  • xAxis.minimum : real
• yAxis
  • yAxis.activeValue : real
  • yAxis.enabled : bool
  • yAxis.maximum : real
  • yAxis.minimum : real

Signale

• canceled(eventPoint point)
• grabChanged(PointerDevice::GrabTransition transition, eventPoint point)
• rotationChanged(qreal delta)
• scaleChanged(qreal delta)
• translationChanged(QVector2D delta)

Ausführliche Beschreibung

PinchHandler ist ein Handler, der eine Mehrfinger-Geste interpretiert, um ein Element interaktiv zu drehen, zu zoomen und zu verschieben. Wie andere Eingabe-Handler ist er standardmäßig voll funktionsfähig und bearbeitet sein „ target “, also das Element, in dem er deklariert ist.

import QtQuick

Rectangle {
    width: 400
    height: 300
    color: "lightsteelblue"
    PinchHandler { }
}

Er verfügt über Eigenschaften, mit denen der Bereich für das Verschieben, Drehen und Zoomen eingeschränkt werden kann.

Wird er innerhalb eines Elements deklariert, ihm jedoch ein anderes „ target “ zugewiesen, verarbeitet er Ereignisse innerhalb der Grenzen des äußeren Elements, manipuliert jedoch stattdessen das Element „ target “:

import QtQuick

Item {
    width: 640
    height: 480

    Rectangle {
        id: map
        color: "aqua"
        width: 400
        height: 300
    }

    PinchHandler {
        target: map
    }
}

Eine dritte Möglichkeit besteht darin, ` target ` auf ` null ` zu setzen und auf Änderungen der Eigenschaften auf andere Weise zu reagieren:

import QtQuick

Window {
    width: 320; height: 240
    visible: true
    title: handler.persistentRotation.toFixed(1) + "° " +
           handler.persistentTranslation.x.toFixed(1) + ", " +
           handler.persistentTranslation.y.toFixed(1) + " " +
           (handler.persistentScale * 100).toFixed(1) + "%"

    PinchHandler {
        id: handler
        target: null
        persistentScale: 0.25
        onTranslationChanged: (delta) => {
            image.x -= delta.x
            image.y -= delta.y
        }
    }

    Image {
        id: image
        source: "images/album-cover.jpg"
        scale: handler.persistentScale
        x: -600; y: -450
    }
}

Siehe auch „ PinchArea“ , „ QPointerEvent::pointCount()“, „ QNativeGestureEvent::fingerCount()“ und „Qt Quick “ – Beispiele: Zeiger-Handler.

Dokumentation zur Eigenschaft

acceptedDevices : flags

Die Arten von Zeigegeräten, die diesen Pointer-Handler aktivieren können.

Standardmäßig ist diese Eigenschaft auf „ PointerDevice.AllDevices “ gesetzt. Wenn Sie sie auf eine „ODER“-Kombination von Gerätetypen setzen, werden Ereignisse von nicht übereinstimmenden Geräten ignoriert.

Beispielsweise könnte ein Steuerelement so konfiguriert werden, dass es auf Maus- und Stiftklicks auf eine bestimmte Weise und auf Touchscreen-Tipps auf eine andere Weise reagiert, wobei zwei Handler zum Einsatz kommen:

Item {
   TapHandler {
       acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad | PointerDevice.Stylus
       onTapped: console.log("clicked")
   }
   TapHandler {
       acceptedDevices: PointerDevice.TouchScreen
       onTapped: console.log("tapped")
   }
}

acceptedModifiers : flags

Wenn diese Eigenschaft gesetzt ist, müssen die angegebenen Tastaturmodifikatoren gedrückt werden, damit auf Zeigerereignisse reagiert wird; andernfalls werden diese ignoriert.

Ist diese Eigenschaft auf „ Qt.KeyboardModifierMask “ (Standardwert) gesetzt, ignoriert der „ PointerHandler “ die Modifikatortasten.

Beispielsweise könnte ein „ Item “ zwei Handler desselben Typs haben, von denen einer nur aktiviert ist, wenn die erforderlichen Tastenmodifikatoren gedrückt sind:

Item {
   TapHandler {
       acceptedModifiers: Qt.ControlModifier
       onTapped: console.log("control-tapped")
   }
   TapHandler {
       acceptedModifiers: Qt.NoModifier
       onTapped: console.log("tapped")
   }
}

Wenn Sie „ acceptedModifiers “ auf eine „ODER“-Kombination von Modifikatortasten setzen, bedeutet dies, dass alle diese Modifikatortasten gedrückt sein müssen, um den Handler zu aktivieren:

Item {
   TapHandler {
       acceptedModifiers: Qt.ControlModifier | Qt.AltModifier | Qt.ShiftModifier
       onTapped: console.log("control-alt-shift-tapped")
   }
}

Die verfügbaren Modifikatoren sind wie folgt:

Wenn Sie ein noch komplexeres Verhalten benötigen, als es mit Kombinationen aus mehreren Handlern mit mehreren Modifikator-Flags erreicht werden kann, können Sie die Modifikatoren im JavaScript-Code überprüfen:

Item {
    TapHandler {
        onTapped:
            switch (point.modifiers) {
            case Qt.ControlModifier | Qt.AltModifier:
                console.log("CTRL+ALT");
                break;
            case Qt.ControlModifier | Qt.AltModifier | Qt.MetaModifier:
                console.log("CTRL+META+ALT");
                break;
            default:
                console.log("other modifiers", point.modifiers);
                break;
            }
    }
}

Siehe auch Qt::KeyboardModifier.

acceptedPointerTypes : flags

Die Arten von Zeigeinstrumenten (Finger, Stift, Radiergummi usw.), die diesen Pointer-Handler aktivieren können.

Standardmäßig ist diese Eigenschaft auf „ PointerDevice.AllPointerTypes “ gesetzt. Wenn Sie sie auf eine „OR“-Kombination von Gerätetypen setzen, werden Ereignisse von nicht übereinstimmenden „ devices “ ignoriert.

Beispielsweise könnte ein Steuerelement so gestaltet werden, dass es auf Maus-, Touch- und Stiftklicks in bestimmter Weise reagiert, sich jedoch löscht, wenn es mit einem Radiergummi-Werkzeug auf einem Grafiktablett angetippt wird – mit zwei Handlern:

Rectangle {
   id: rect
   TapHandler {
       acceptedPointerTypes: PointerDevice.Generic | PointerDevice.Finger | PointerDevice.Pen
       onTapped: console.log("clicked")
   }
   TapHandler {
       acceptedPointerTypes: PointerDevice.Eraser
       onTapped: rect.destroy()
   }
}

active : bool [read-only]

Diese Eigenschaft gilt als „ true “, wenn alle Einschränkungen (insbesondere minimumPointCount und maximumPointCount) erfüllt sind und die „ target “ – sofern vorhanden – bearbeitet wird.

activeRotation : real [read-only]

Die Drehung der Pinch-Geste in Grad, wobei positive Werte im Uhrzeigersinn gelten. Zu Beginn der Geste ist der Wert „ 0 “. Ist „ target “ nicht null, wird dieser Wert automatisch zu „ rotation “ addiert. Andernfalls können Bindungen verwendet werden, um beliebige Aktionen mit diesem Wert auszuführen.

Siehe auch QtQuick::PinchHandler::rotationAxis.activeValue.

activeScale : real [read-only]

Der Skalierungsfaktor während der Ausführung der Pinch-Geste. Er beträgt zu Beginn der Geste 1,0, steigt an, wenn die Berührungspunkte auseinandergezogen werden, und sinkt, wenn die Berührungspunkte zusammengeführt werden. Wenn „ target “ nicht null ist, wird dessen „ scale “ automatisch mit diesem Wert multipliziert. Andernfalls können Bindungen verwendet werden, um beliebige Aktionen mit diesem Wert durchzuführen.

Siehe auch „ QtQuick::PinchHandler::scaleAxis.activeValue “.

activeTranslation : point [read-only]

Die Verschiebung des Punktclusters während der Ausführung der Pinch-Geste. Zu Beginn der Geste beträgt der Wert „ 0, 0 “ und nimmt zu, wenn die „ eventPoint(s) “ nach unten und nach rechts gezogen werden. Nach Beendigung der Geste bleibt der Wert unverändert; zu Beginn der nächsten Pinch-Geste wird er wieder auf „ 0, 0 “ zurückgesetzt.

centroid : QtQuick::handlerPoint [read-only]

Ein Punkt genau in der Mitte der derzeit gedrückten Berührungspunkte. Die „ target “ wird um diesen Punkt gedreht.

cursorShape : Qt::CursorShape

Diese Eigenschaft legt die Cursorform fest, die angezeigt wird, wenn der Mauszeiger über das Element „ parent “ bewegt wird, während „ active “ auf „ true “ gesetzt ist.

Die verfügbaren Cursorformen sind:

• Qt.ArrowCursor
• Qt.UpArrowCursor
• Qt.CrossCursor
• Qt.WaitCursor
• Qt.IBeamCursor
• Qt.Größe-Vertikal-Cursor
• Qt.SizeHorCursor
• Qt.SizeBDiagCursor
• Qt.SizeFDiagCursor
• Qt.SizeAllCursor
• Qt.LeererCursor
• Qt.SplitVCursor
• Qt.SplitHCursor
• Qt.ZeigenderFinger-Cursor
• Qt.VerbotenerCursor
• Qt.Was-ist-das-Cursor
• Qt.Beschäftigt-Cursor
• Qt.Cursor mit offener Hand
• Qt.Geschlossene-Hand-Cursor
• Qt.Ziehen-Kopieren-Cursor
• Qt.Ziehen-Verschieben-Cursor
• Qt.DragLinkCursor

Der Standardwert ist nicht festgelegt, wodurch das Element „ cursor “ von „ parent “ angezeigt wird. Diese Eigenschaft kann auf den ursprünglichen Zustand zurückgesetzt werden, indem sie auf „undefined“ gesetzt wird.

Siehe auch „ Qt::CursorShape“ , „ QQuickItem::cursor()“ und „ HoverHandler::cursorShape “.

dragThreshold : int

Die Entfernung in Pixeln, um die der Benutzer ein „ eventPoint “ ziehen muss, damit dies als Ziehgeste gewertet wird.

Der Standardwert hängt von der Plattform und der Bildschirmauflösung ab. Er kann auf den Standardwert zurückgesetzt werden, indem man ihn auf „undefined“ setzt. Das Verhalten beim Beginn einer Ziehgeste variiert je nach Handler.

enabled : bool

Wenn ein „ PointerHandler “ deaktiviert ist, werden alle Ereignisse abgelehnt und es werden keine Signale ausgegeben.

Wenn die Eigenschaft „ parent “ eines „ PointerHandler “ auf „ disabled “ gesetzt ist, wird der Handler ebenfalls effektiv deaktiviert, selbst wenn die Eigenschaft „ enabled “ weiterhin auf „ true “ gesetzt ist.

grabPermissions : flags

Diese Eigenschaft legt die Berechtigungen fest, wenn die Logik dieses Handlers beschließt, die exklusive Grab-Kontrolle zu übernehmen, oder wenn sie aufgefordert wird, die Übernahme oder Aufhebung der Grab-Kontrolle durch einen anderen Handler zu genehmigen.

Die Standardeinstellung ist „ PointerHandler.CanTakeOverFromItems | PointerHandler.CanTakeOverFromHandlersOfDifferentType | PointerHandler.ApprovesTakeOverByAnything “, was die meisten Übernahme-Szenarien zulässt, aber beispielsweise verhindert, dass sich zwei „PinchHandler“ um dieselben Berührungspunkte streiten.

margin : real

Der Randbereich außerhalb der Grenzen des „ parent “-Elements, innerhalb dessen ein „ eventPoint “ diesen Handler aktivieren kann. Bei einer „ PinchHandler “, bei der der „ target “ gleichzeitig der „ parent “ ist, empfiehlt es sich beispielsweise, diesen Wert auf mindestens die Hälfte der Breite eines typischen Benutzerfingers festzulegen, damit die Pinch-Geste auch dann noch möglich ist, wenn das „ parent “ auf eine sehr kleine Größe skaliert wurde. Oder wenn eine auf „ TapHandler “ basierende Schaltfläche nahe am Bildschirmrand platziert ist, kann sie dazu genutzt werden, Fitts’ Gesetz zu erfüllen: Reagiere auf Mausklicks am Bildschirmrand, auch wenn die Schaltfläche optisch um einige Pixel vom Rand entfernt ist.

Der Standardwert ist 0.

parent : Item

Die „ Item “, die den Geltungsbereich des Handlers darstellt; das „Item“, in dem er deklariert wurde. Der Handler verarbeitet Ereignisse im Namen dieses „Item“, was bedeutet, dass ein Zeigerereignis relevant ist, wenn mindestens eine seiner „ eventPoints “ innerhalb des „Item“ auftritt. Anfangs ist „ target() “ identisch, kann jedoch neu zugewiesen werden.

Siehe auch „ target “ und „ QObject::parent()“.

persistentRotation : real

Die Rotation, die auf die „ target “ angewendet werden soll, sofern diese nicht null ist. Andernfalls können Bindungen verwendet werden, um beliebige Aktionen mit diesem Wert durchzuführen. Während die Pinch-Geste ausgeführt wird, wird „ activeRotation “ kontinuierlich hinzugefügt; nach Beendigung der Geste bleibt der Wert unverändert; und wenn die nächste Pinch-Geste beginnt, wird er wieder durch „ activeRotation “ modifiziert.

Es ist möglich, diese Eigenschaft festzulegen, um die Basisrotation mit einer Rotation zu synchronisieren, die auf andere Weise festgelegt wurde, beispielsweise durch einen anderen Handler. Wenn Sie diese Eigenschaft direkt festlegen, ändert sich „ activeRotation “ nicht, und „ rotationChanged(0) “ wird ausgegeben.

persistentScale : real

Der Skalierungsfaktor, der automatisch auf dem „ target “ festgelegt wird, sofern er nicht null ist. Andernfalls können Bindungen verwendet werden, um beliebige Aktionen mit diesem Wert durchzuführen. Während der Pinch-Geste wird er kontinuierlich mit activeScale multipliziert; nach Beendigung der Geste bleibt er unverändert; und wenn die nächste Pinch-Geste beginnt, wird er wieder mit activeScale multipliziert.

Es ist möglich, diese Eigenschaft festzulegen, um die Basisskala mit einer Skala zu synchronisieren, die auf andere Weise festgelegt wurde, beispielsweise durch einen anderen Handler. Wenn Sie diese Eigenschaft direkt festlegen, ändert sich activeScale nicht, und scaleChanged(1) wird ausgegeben.

persistentTranslation : point

Die Übersetzung, die auf „ target “ angewendet werden soll, sofern es sich nicht um „ null “ handelt. Andernfalls können Bindungen verwendet werden, um beliebige Aktionen mit diesem Wert durchzuführen. Während die Pinch-Geste ausgeführt wird, wird „ activeTranslation “ kontinuierlich hinzugefügt; nach Beendigung der Geste bleibt der Wert unverändert.

Es ist möglich, diese Eigenschaft festzulegen, um die Basisverschiebung mit einer Verschiebung zu synchronisieren, die auf andere Weise festgelegt wurde, beispielsweise durch einen anderen Handler. Wenn Sie diese Eigenschaft direkt festlegen, ändert sich activeTranslation nicht, und es wird translationChanged({0, 0}) ausgegeben.

rotationAxis group

rotationAxis Steuert die Einschränkungen für die Festlegung der „ rotation “ des Elements „ target “ entsprechend der Drehung der Touchpoint-Gruppe.

minimum ist die minimal zulässige Drehung. „ maximum “ ist die maximal zulässige Drehung. Ist „ enabled “ auf „true“ gesetzt, ist eine Drehung zulässig. „ activeValue “ entspricht „ QtQuick::PinchHandler::activeRotation “.

Das Signal „ activeValueChanged “ wird ausgelöst, wenn sich „ activeValue “ ändert, um den Betrag der Änderung mitzuteilen. Dies dient der schrittweisen Anpassung einer Eigenschaft über mehrere Handler.

import QtQuick

Rectangle {
    width: 100; height: 100
    color: "lightsteelblue"; antialiasing: true

    PinchHandler {
        id: handler
        target: null
        xAxis.onActiveValueChanged: (delta) => parent.radius -= delta
        yAxis.onActiveValueChanged: (delta) => parent.border.width += delta
        rotationAxis.onActiveValueChanged: (delta) => parent.rotation += delta // add
        scaleAxis.onActiveValueChanged: (delta) => parent.scale *= delta // multiply
    }

    WheelHandler {
        acceptedModifiers: Qt.NoModifier
        property: "rotation"
    }

    WheelHandler {
        acceptedModifiers: Qt.ControlModifier
        property: "scale"
    }
}

scaleAxis group

scaleAxis Steuert die Einschränkungen für die Festlegung des „ scale “ des Elements „ target “ entsprechend dem Abstand zwischen den Berührungspunkten.

minimum ist der minimal zulässige Maßstab. „ maximum “ ist der maximal zulässige Maßstab. Wenn „ enabled “ auf „true“ gesetzt ist, ist eine Skalierung zulässig. „ activeValue “ entspricht „ QtQuick::PinchHandler::activeScale “.

Das Signal „ activeValueChanged “ wird ausgelöst, wenn sich „ activeValue “ ändert, um den Multiplikator für die inkrementelle Änderung bereitzustellen. Dies dient der inkrementellen Anpassung einer Eigenschaft über mehrere Handler.

import QtQuick

Rectangle {
    width: 100; height: 100
    color: "lightsteelblue"; antialiasing: true

    PinchHandler {
        id: handler
        target: null
        xAxis.onActiveValueChanged: (delta) => parent.radius -= delta
        yAxis.onActiveValueChanged: (delta) => parent.border.width += delta
        rotationAxis.onActiveValueChanged: (delta) => parent.rotation += delta // add
        scaleAxis.onActiveValueChanged: (delta) => parent.scale *= delta // multiply
    }

    WheelHandler {
        acceptedModifiers: Qt.NoModifier
        property: "rotation"
    }

    WheelHandler {
        acceptedModifiers: Qt.ControlModifier
        property: "scale"
    }
}

target : Item

Das Element, auf das dieser Handler einwirkt.

Standardmäßig entspricht es dem „ parent “, also dem Element, in dem der Handler deklariert ist. Manchmal kann es jedoch sinnvoll sein, das Ziel auf ein anderes Element festzulegen, um Ereignisse in einem Element zu verarbeiten, aber ein anderes Element zu bearbeiten; oder um „ null “ zu verwenden, um das Standardverhalten zu deaktivieren und stattdessen etwas anderes auszuführen.

xAxis group

xAxis Steuert die Einschränkungen für die horizontale Verschiebung des Elements „ target “.

minimum ist die minimal zulässige x-Koordinate der Verschiebung. „ maximum “ ist die maximal zulässige x-Koordinate der Verschiebung. Ist „ enabled “ wahr, ist das horizontale Ziehen erlaubt.

Das Signal „ activeValueChanged “ wird ausgelöst, wenn sich „ activeValue “ ändert, um den Betrag der Änderung mitzuteilen. Dies dient dazu, eine Eigenschaft schrittweise über mehrere Handler anzupassen.

import QtQuick

Rectangle {
    width: 100; height: 100
    color: "lightsteelblue"; antialiasing: true

    PinchHandler {
        id: handler
        target: null
        xAxis.onActiveValueChanged: (delta) => parent.radius -= delta
        yAxis.onActiveValueChanged: (delta) => parent.border.width += delta
        rotationAxis.onActiveValueChanged: (delta) => parent.rotation += delta // add
        scaleAxis.onActiveValueChanged: (delta) => parent.scale *= delta // multiply
    }

    WheelHandler {
        acceptedModifiers: Qt.NoModifier
        property: "rotation"
    }

    WheelHandler {
        acceptedModifiers: Qt.ControlModifier
        property: "scale"
    }
}

yAxis group

yAxis Steuert die Einschränkungen für die vertikale Verschiebung des Elements „ target “.

minimum ist die kleinste zulässige y-Koordinate der Verschiebung. „ maximum “ ist die größte zulässige y-Koordinate der Verschiebung. Ist „ enabled “ wahr, ist vertikales Ziehen zulässig.

Das Signal „ activeValueChanged “ wird ausgelöst, wenn sich „ activeValue “ ändert, um den Betrag der Änderung anzugeben. Dies dient dazu, eine Eigenschaft schrittweise über mehrere Handler anzupassen.

import QtQuick

Rectangle {
    width: 100; height: 100
    color: "lightsteelblue"; antialiasing: true

    PinchHandler {
        id: handler
        target: null
        xAxis.onActiveValueChanged: (delta) => parent.radius -= delta
        yAxis.onActiveValueChanged: (delta) => parent.border.width += delta
        rotationAxis.onActiveValueChanged: (delta) => parent.rotation += delta // add
        scaleAxis.onActiveValueChanged: (delta) => parent.scale *= delta // multiply
    }

    WheelHandler {
        acceptedModifiers: Qt.NoModifier
        property: "rotation"
    }

    WheelHandler {
        acceptedModifiers: Qt.ControlModifier
        property: "scale"
    }
}

Signal-Dokumentation

canceled(eventPoint point)

Wenn dieser Handler den angegebenen point bereits ergriffen hat, wird dieses Signal ausgelöst, sobald die Ergreifung von einem anderen Pointer-Handler oder Item übernommen wird.

grabChanged(PointerDevice::GrabTransition transition, eventPoint point)

Dieses Signal wird ausgelöst, wenn sich der Grab in einer Weise verändert hat, die für diesen Handler relevant ist.

Das Verb „ transition “ gibt an, was geschehen ist. Das Objekt „ point “ ist der Punkt, der ergriffen oder freigegeben wurde.

Gültige Werte für „ transition “ sind:

rotationChanged(qreal delta)

Das Signal „ rotationChanged “ wird ausgelöst, wenn sich „ activeRotation “ (und damit „ persistentRotation “) ändert. Der Wert von „ delta “ gibt die additive Änderung der Drehung an. Wenn der Benutzer beispielsweise seine Finger bewegt, um den Pinch-Abstand so zu ändern, dass sich „ activeRotation “ von 10 auf 30 Grad ändert, wird „ rotationChanged(20) “ ausgelöst. Damit können Sie die Drehung eines Elements schrittweise ändern:

import QtQuick

Rectangle {
    width: 100; height: 100
    color: "lightsteelblue"

    PinchHandler {
        id: handler
        target: null
        onRotationChanged: (delta) => parent.rotation += delta // add
        onScaleChanged: (delta) => parent.scale *= delta // multiply
    }
}

scaleChanged(qreal delta)

Das Signal „ scaleChanged “ wird ausgelöst, wenn sich „ activeScale “ (und damit „ persistentScale “) ändert. Der Wert „ delta “ gibt die multiplikative Änderung des Maßstabs an. Wenn der Benutzer beispielsweise seine Finger bewegt, um den Abstand beim Zusammenziehen so zu verändern, dass sich „ activeScale “ von 2 auf 2,5 ändert, wird „ scaleChanged(1.25) “ ausgelöst. Damit können Sie den Maßstab eines Elements schrittweise ändern:

import QtQuick

Rectangle {
    width: 100; height: 100
    color: "lightsteelblue"

    PinchHandler {
        id: handler
        target: null
        onRotationChanged: (delta) => parent.rotation += delta // add
        onScaleChanged: (delta) => parent.scale *= delta // multiply
    }
}

translationChanged(QVector2D delta)

Das Signal „ translationChanged “ wird ausgelöst, wenn sich „ activeTranslation “ (und damit „ persistentTranslation “) ändert. Der Vektor „ delta “ gibt die Änderung der Translation an. Damit können Sie die Position eines Elements schrittweise ändern:

import QtQuick

Window {
    width: 320; height: 240
    visible: true
    title: handler.persistentRotation.toFixed(1) + "° " +
           handler.persistentTranslation.x.toFixed(1) + ", " +
           handler.persistentTranslation.y.toFixed(1) + " " +
           (handler.persistentScale * 100).toFixed(1) + "%"

    PinchHandler {
        id: handler
        target: null
        persistentScale: 0.25
        onTranslationChanged: (delta) => {
            image.x -= delta.x
            image.y -= delta.y
        }
    }

    Image {
        id: image
        source: "images/album-cover.jpg"
        scale: handler.persistentScale
        x: -600; y: -450
    }
}