Transformar: Deslocar, Ampliar e Girar

Some gestures use two fingers at once. Compose bundles pan, zoom, and rotate into a single helper called detectTransformGestures. 🤏

Inside pointerInput, detectTransformGestures hands you pan as an Offset, zoom as a Float scale, and rotation in degrees together.

Keep a scale, an offset, and a rotation in remembered state. Update each from the gesture so the element transforms live.

The zoom value is relative, so multiply it into your scale rather than replacing it. Pinch out grows, pinch in shrinks.

The rotation delta is in degrees per gesture step. Accumulate it so twisting two fingers spins your content smoothly.

The pan Offset reports how far the gesture's center moved. Add it to your offset state to slide the content under the fingers.

The clean way to render transforms is the graphicsLayer modifier. Set scaleX, scaleY, rotationZ, and translation in one place.

Inside graphicsLayer, set translationX and translationY from your offset. It transforms without forcing a costly layout pass.

Users will pinch wildly, so clamp your scale to sane bounds with coerceIn. This stops content from vanishing or filling the world.

graphicsLayer applies scale, then rotation, then translation. Knowing this order helps you predict where transformed content lands.

By default transforms pivot around the element's center. Adjust transformOrigin in graphicsLayer to zoom and rotate around another point.

How should you apply the incoming zoom value to your scale state?

You used detectTransformGestures for pan, zoom, and rotate, then applied them through graphicsLayer with clamping. Pinch-to-zoom is yours. 🎉