Редактор стикеров WhatsApp с Kotlin и Jetpack Compose [закрыто] ⇐ Android
Редактор стикеров WhatsApp с Kotlin и Jetpack Compose [закрыто]
Я хочу создать приложение для создания стикеров с помощью Kotlin и Compose, но я застрял в создании редактора стикеров, потому что хочу, чтобы он был похож на картинку, которую я разместил ниже, но я не смог найти решение. Я хочу, чтобы этот редактор перемещался, масштабировался и вращался всего одним пальцем.
изображение
Точно так же, как эта гифка, которую я разместил
Я пытался сделать это, используя статьи в Интернете, но это не сработало так, как я ожидал
@ExperimentalComposeUiApi @Composable весело OneFinger() {
var viewRotation = запомнить { 0.0 } вар FingerRotation = запомнить {0.0} вращение вар, запомнив { изменяемоеСостояние(0.0) } var centerX, помните { изменяемоеStateOf (0f) } var centerY, помните { изменяемоеStateOf (0f) } вар touchX, помните { изменяемоеStateOf (0f) } вар touchY, помните { изменяемоеStateOf (0f) } var TranslationX по памяти { изменяемоеStateOf (0f) } вар переводY, запомнив { изменяемоеStateOf (0f) } var sizeTouchX, запомнив { изменяемоеStateOf (0f) } var sizeTouchY, помните { изменяемоеStateOf (0f) } размер var, помните { изменяемоеStateOf(85) } BoxWithConstraints( contentAlignment = Выравнивание.Центр, модификатор = Модификатор .size(400.dp) .background(Цвет.Белый) ) { Коробка( contentAlignment = Выравнивание.Центр, модификатор = Модификатор .graphicsLayer( переводX = переводX, переводY = переводY, ) ) { Коробка( contentAlignment = Выравнивание.Центр, модификатор = Модификатор .rotate(rotation.toFloat()) ) { Коробка( модификатор = Модификатор .size((115 + (размер - 85)).dp) .граница( граница = BorderStroke(0.5.dp, Color.Gray), форма = ПрямоугольнаяФорма ) ) Коробка( модификатор = Модификатор .size((135 + (размер - 85)).dp) ) { Коробка( contentAlignment = Выравнивание.Центр, модификатор = Модификатор .align(Выравнивание.BottomStart) .onGloballyPositioned { val windowBounds = it.boundsInWindow() centerX = (windowBounds.size.width/2f) centerY = (windowBounds.size.height/2f) Log.e("error1", "centerX = $centerX и center y = $centerY") } .pointerInteropFilter {событие -> touchX = event.x touchY = event.y когда (событие.действие) { MotionEvent.ACTION_DOWN -> { viewRotation = вращение FingerRotation = Math.toDegrees( атан2( (touchX - centerX).toDouble(), (centerY - touchY).toDouble() ) ) } MotionEvent.ACTION_MOVE -> { val newFingerRotation = Math.toDegrees( атан2( (touchX - centerX).toDouble(), (centerY - touchY).toDouble() ) ) вращение = (viewRotation + newFingerRotation — вращение пальца) } MotionEvent.ACTION_UP -> { палецВращение = 0,0 } } истинный } ) { Изображение( художник = PainterResource(id = R.drawable.baseline_replay_24), ContentDescription = ноль, модификатор = Модификатор .align(Выравнивание.BottomStart) .clip(CircleShape) .background(ЧерныйСерый) ) } Коробка( contentAlignment = Выравнивание.Центр, модификатор = Модификатор .align(Выравнивание.BottomEnd) .pointerInput(Единица измерения) { awaitEachGesture { ожиданиеFirstDown() делать { событие val = awaitPointerEvent() val offset = event.calculatePan() sizeTouchX += offset.x sizeTouchY += offset.y val currentDistance = sqrt( sizeTouchX.pow(2) + sizeTouchY.pow(2) ) размер = currentDistance.roundToInt() } while (event.changes.any { it.pressed }) } } ) { Изображение( художник = PainterResource(id = R.drawable.baseline_open_in_full_24), ContentDescription = ноль, модификатор = Модификатор .align(Выравнивание.BottomEnd) .clip(CircleShape) .background(ЧерныйСерый) ) } } Коробка { Изображение( модификатор = Modifier.size(size.dp), ContentDescription = ноль, художник = PainterResource(R.drawable.ic_launcher_background) ) } } Коробка( модификатор = Модификатор .size((105 + (размер - 85)).dp) .pointerInput(Единица измерения) { обнаружитьDragGestures {изменение, перетаскивание -> переводY += dragAmount.y переводX += перетаскивание.x изменение.потребление() } } ) } }
и на главном экране
@OptIn(ExperimentalComposeUiApi::class) @Composable весело MainScreen() {
Коробка( contentAlignment = Выравнивание.Центр, модификатор = Модификатор .background(Цвет.СветлыйСерый) .fillMaxSize() ) { Один Палец() }
Я хочу создать приложение для создания стикеров с помощью Kotlin и Compose, но я застрял в создании редактора стикеров, потому что хочу, чтобы он был похож на картинку, которую я разместил ниже, но я не смог найти решение. Я хочу, чтобы этот редактор перемещался, масштабировался и вращался всего одним пальцем.
изображение
Точно так же, как эта гифка, которую я разместил
Я пытался сделать это, используя статьи в Интернете, но это не сработало так, как я ожидал
@ExperimentalComposeUiApi @Composable весело OneFinger() {
var viewRotation = запомнить { 0.0 } вар FingerRotation = запомнить {0.0} вращение вар, запомнив { изменяемоеСостояние(0.0) } var centerX, помните { изменяемоеStateOf (0f) } var centerY, помните { изменяемоеStateOf (0f) } вар touchX, помните { изменяемоеStateOf (0f) } вар touchY, помните { изменяемоеStateOf (0f) } var TranslationX по памяти { изменяемоеStateOf (0f) } вар переводY, запомнив { изменяемоеStateOf (0f) } var sizeTouchX, запомнив { изменяемоеStateOf (0f) } var sizeTouchY, помните { изменяемоеStateOf (0f) } размер var, помните { изменяемоеStateOf(85) } BoxWithConstraints( contentAlignment = Выравнивание.Центр, модификатор = Модификатор .size(400.dp) .background(Цвет.Белый) ) { Коробка( contentAlignment = Выравнивание.Центр, модификатор = Модификатор .graphicsLayer( переводX = переводX, переводY = переводY, ) ) { Коробка( contentAlignment = Выравнивание.Центр, модификатор = Модификатор .rotate(rotation.toFloat()) ) { Коробка( модификатор = Модификатор .size((115 + (размер - 85)).dp) .граница( граница = BorderStroke(0.5.dp, Color.Gray), форма = ПрямоугольнаяФорма ) ) Коробка( модификатор = Модификатор .size((135 + (размер - 85)).dp) ) { Коробка( contentAlignment = Выравнивание.Центр, модификатор = Модификатор .align(Выравнивание.BottomStart) .onGloballyPositioned { val windowBounds = it.boundsInWindow() centerX = (windowBounds.size.width/2f) centerY = (windowBounds.size.height/2f) Log.e("error1", "centerX = $centerX и center y = $centerY") } .pointerInteropFilter {событие -> touchX = event.x touchY = event.y когда (событие.действие) { MotionEvent.ACTION_DOWN -> { viewRotation = вращение FingerRotation = Math.toDegrees( атан2( (touchX - centerX).toDouble(), (centerY - touchY).toDouble() ) ) } MotionEvent.ACTION_MOVE -> { val newFingerRotation = Math.toDegrees( атан2( (touchX - centerX).toDouble(), (centerY - touchY).toDouble() ) ) вращение = (viewRotation + newFingerRotation — вращение пальца) } MotionEvent.ACTION_UP -> { палецВращение = 0,0 } } истинный } ) { Изображение( художник = PainterResource(id = R.drawable.baseline_replay_24), ContentDescription = ноль, модификатор = Модификатор .align(Выравнивание.BottomStart) .clip(CircleShape) .background(ЧерныйСерый) ) } Коробка( contentAlignment = Выравнивание.Центр, модификатор = Модификатор .align(Выравнивание.BottomEnd) .pointerInput(Единица измерения) { awaitEachGesture { ожиданиеFirstDown() делать { событие val = awaitPointerEvent() val offset = event.calculatePan() sizeTouchX += offset.x sizeTouchY += offset.y val currentDistance = sqrt( sizeTouchX.pow(2) + sizeTouchY.pow(2) ) размер = currentDistance.roundToInt() } while (event.changes.any { it.pressed }) } } ) { Изображение( художник = PainterResource(id = R.drawable.baseline_open_in_full_24), ContentDescription = ноль, модификатор = Модификатор .align(Выравнивание.BottomEnd) .clip(CircleShape) .background(ЧерныйСерый) ) } } Коробка { Изображение( модификатор = Modifier.size(size.dp), ContentDescription = ноль, художник = PainterResource(R.drawable.ic_launcher_background) ) } } Коробка( модификатор = Модификатор .size((105 + (размер - 85)).dp) .pointerInput(Единица измерения) { обнаружитьDragGestures {изменение, перетаскивание -> переводY += dragAmount.y переводX += перетаскивание.x изменение.потребление() } } ) } }
и на главном экране
@OptIn(ExperimentalComposeUiApi::class) @Composable весело MainScreen() {
Коробка( contentAlignment = Выравнивание.Центр, модификатор = Модификатор .background(Цвет.СветлыйСерый) .fillMaxSize() ) { Один Палец() }
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
Как создать редактор JavaScript, редактор HTML и редактор CSS в HTML?
Anonymous » » в форуме Android - 0 Ответы
- 51 Просмотры
-
Последнее сообщение Anonymous
-