---
title: "ScaleRotateGestureHandler"
description: "ScaleRotateGestureHandler element api."
---
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';

Use the `ScaleRotateGestureHandler` to handle pinch and rotation gestures.
Recognition is limited to the element's geometry.

The `ScaleRoteGestureHandler` supports touchscreens on all platforms, and additionally supports trackpad gestures on macOS and iOS.

```slint playground
export component Example inherits Window {
    width: 400px;
    height: 400px;

    property <float> start-scale;
    property <angle> start-rotation;

    gesture := ScaleRotateGestureHandler {
        started => {
            start-scale = rect.current-scale;
            start-rotation = rect.current-rotation;
        }
        updated => {
            rect.current-scale = start-scale * self.scale;
            rect.current-rotation = start-rotation + self.rotation;
        }

        rect := Rectangle {
            background: @radial-gradient(circle, #4488ff, #224488);
            border-radius: 8px;

            property <float> current-scale: 1.0;
            property <angle> current-rotation: 0deg;
            width: 200px * self.current-scale;
            height: 200px * self.current-scale;
            x: (parent.width - self.width) / 2;
            y: (parent.height - self.height) / 2;

            Text {
                text: "Pinch & rotate";
                color: white;
            }
        }
    }
}
```

The `scale` property provides a cumulative scale factor relative to the start of the gesture (starting at `1.0`).
The `rotation` property provides a cumulative rotation angle (starting at `0deg`).
Use the `started` callback to capture your initial state, then multiply by `scale` and add `rotation` in the `updated` callback to apply the gesture.

## Properties

### enabled
<SlintProperty propName="enabled" typeName="bool" defaultValue="true">
When disabled, the `ScaleRotateGestureHandler` doesn't recognize any gestures and any on-going gesture is cancelled.
</SlintProperty>

### active
<SlintProperty propName="active" typeName="bool" propertyVisibility="out">
`true` while a gesture is being recognized, `false` otherwise.
</SlintProperty>

### scale
<SlintProperty propName="scale" typeName="float" propertyVisibility="out">
The cumulative scale factor of the gesture. Always starts at `1.0` when the gesture begins.
A value greater than `1.0` means zooming in, less than `1.0` means zooming out.
When the gesture is not active, the value is `1.0`.
</SlintProperty>

### rotation
<SlintProperty propName="rotation" typeName="angle" propertyVisibility="out">
The cumulative rotation angle of the gesture. Always starts at `0deg` when the gesture begins.
Positive values indicate clockwise rotation, negative values indicate counter-clockwise rotation.
When the gesture is not active, the value is `0deg`.
</SlintProperty>

### center
<SlintProperty propName="center" typeName="struct" structName="Point" propertyVisibility="out">
The center point of the gesture, in the coordinate system of the `ScaleRotateGestureHandler`.
For two-finger touch input, this is the midpoint between the two fingers.
For trackpad gestures, this is the mouse cursor position.
</SlintProperty>

## Callbacks

### started()
Invoked when a gesture begins. Use this to capture the initial state you want to transform.

### updated()
Invoked whenever the `scale`, `rotation`, or `center` changes during the gesture.

### ended()
Invoked when the gesture completes normally (fingers lifted).

### cancelled()
Invoked when the gesture is cancelled, for example when the handler is disabled during an active gesture or the window loses focus.