0Pricing
Jetpack Compose Academy · Урок

Преобразования: панорамирование, масштабирование и поворот

Поддерживайте жесты масштабирования и мультитач.

«Преобразования: панорамирование, масштабирование и поворот» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Pinch, Zoom, Rotate

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

One Detector, Three Values

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

detectTransformGestures { _, pan, zoom, rotation -> }

Store the Three States

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

var scale by remember { mutableStateOf(1f) }

Multiply the Zoom

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

scale *= zoom

Add the Rotation

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

angle += rotation

Pan Moves It Around

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

offset += pan

Apply with graphicsLayer

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

Modifier.graphicsLayer(scaleX = scale, scaleY = scale, rotationZ = angle)

Translate Inside the Layer

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

translationX = offset.x; translationY = offset.y

Clamp the Scale

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

scale = scale.coerceIn(0.5f, 5f)

Order of Operations

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

Centered Around the Pivot

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

Modifier.graphicsLayer(transformOrigin = TransformOrigin(0f, 0f))

Quick Check

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

Recap: Multi-Touch Magic

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

Часто задаваемые вопросы

Урок «Преобразования: панорамирование, масштабирование и поворот» бесплатный?

Да — полный текст урока «Преобразования: панорамирование, масштабирование и поворот» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.

Чему я научусь в уроке «Преобразования: панорамирование, масштабирование и поворот»?

Поддерживайте жесты масштабирования и мультитач. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?

Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Преобразования: панорамирование, масштабирование и поворот»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?

Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. pointerInput и detectTapGestures
  2. Перетаскивание, смахивание и бросок
  3. Преобразования: панорамирование, масштабирование и поворот
  4. Связи вложенной прокрутки
← Назад к Jetpack Compose Academy