---
title: "calculatePan"
description: "Returns the change in the centroid location between the previous and the current pointers that
are down. Pointers that are newly down or raised are not considered in the centroid movement.

Example Usage:"
type: "function"
---

<div class='type'>Function</div>


<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun PointerEvent.calculatePan(): Offset
```


Returns the change in the centroid location between the previous and the current pointers that
are down. Pointers that are newly down or raised are not considered in the centroid movement.

Example Usage:



## Code Examples
### CalculatePan
```kotlin
@Composable
fun CalculatePan() {
    val offsetX = remember { mutableStateOf(0f) }
    val offsetY = remember { mutableStateOf(0f) }
    Box(
        Modifier.offset { IntOffset(offsetX.value.roundToInt(), offsetY.value.roundToInt()) }
            .graphicsLayer()
            .background(Color.Blue)
            .pointerInput(Unit) {
                awaitEachGesture {
                    awaitFirstDown()
                    do {
                        val event = awaitPointerEvent()
                        val offset = event.calculatePan()
                        offsetX.value += offset.x
                        offsetY.value += offset.y
                    } while (event.changes.any { it.pressed })
                }
            }
            .fillMaxSize()
    )
}
```