<div class='type'>Compose Modifier</div>

<a id='references'></a>


<h2 id="transformable-state-lockrotationonzoompan-enabled">transformable</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.transformable(
    state: TransformableState,
    lockRotationOnZoomPan: Boolean = false,
    enabled: Boolean = true,
) = transformable(state, { true }, lockRotationOnZoomPan, enabled)
```


Enable transformation gestures of the modified UI element.

Users should update their state themselves using default `TransformableState` and its
`onTransformation` callback or by implementing `TransformableState` interface manually and
reflect their own state in UI when using this component.

#### Parameters

| | |
| --- | --- |
| state | `TransformableState` of the transformable. Defines how transformation events will be interpreted by the user land logic, contains useful information about on-going events and provides animation capabilities. |
| lockRotationOnZoomPan | If `true`, rotation is allowed only if touch slop is detected for rotation before pan or zoom motions. If not, pan and zoom gestures will be detected, but rotation gestures will not be. If `false`, once touch slop is reached, all three gestures are detected. |
| enabled | whether zooming by gestures is enabled or not |






<hr class="docs-overload-divider">


<h2 id="transformable-state-canpan-lockrotationonzoompan-enabled">transformable</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.transformable(
    state: TransformableState,
    canPan: (Offset) -> Boolean,
    lockRotationOnZoomPan: Boolean = false,
    enabled: Boolean = true,
) = this then TransformableElement(state, canPan, lockRotationOnZoomPan, enabled)
```


Enable transformation gestures of the modified UI element.

Users should update their state themselves using default `TransformableState` and its
`onTransformation` callback or by implementing `TransformableState` interface manually and
reflect their own state in UI when using this component.

This overload of transformable modifier provides `canPan` parameter, which allows the caller to
control when the pan can start. making pan gesture to not to start when the scale is 1f makes
transformable modifiers to work well within the scrollable container. See example:

#### Parameters

| | |
| --- | --- |
| state | `TransformableState` of the transformable. Defines how transformation events will be interpreted by the user land logic, contains useful information about on-going events and provides animation capabilities. |
| canPan | whether the pan gesture can be performed or not given the pan offset |
| lockRotationOnZoomPan | If `true`, rotation is allowed only if touch slop is detected for rotation before pan or zoom motions. If not, pan and zoom gestures will be detected, but rotation gestures will not be. If `false`, once touch slop is reached, all three gestures are detected. |
| enabled | whether zooming by gestures is enabled or not |