Запутанное поведение при преобразовании «поворот» Compose Canvas

Question

У меня есть простой Composable Canvas, который рисует фигуру несколько раз в разных позициях, и я хочу применить вращение к каждой итерации фигуры в соответствии с определенным алгоритмом. Однако я не могу полностью контролировать расположение фигур на холсте, так как rotateтрансформация, по-видимому, применяется translationтрансформация по-своему. Вот что у меня есть

          @Preview
    @Composable
    fun CanvasCollosum() {
        val painter = rememberVectorPainter(image = ImageVector.vectorResource(id = R.drawable.tick))
        Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center){
            Canvas(modifier = Modifier.height(200.dp).aspectRatio(1f)) {
                with(painter) {
                    repeat(12) {
                        (it * 30f).let { angle ->
                            translate(
                                top = 0f, // Some translation is still applied by 'rotate'
                                left = 0f
                            ) {
                                rotate(angle) {
                                    draw(
                                        Size(100f, 100f),
                                        colorFilter = ColorFilter.tint(Color.White)
                                    )
                                }
                            }
                        }
                    }
                }
            }
        }
    }

Следовательно, по какой-то причине расположение всех фигур здесь (всего 12) принимает форму круга, что совсем не то, что я ожидал. Я могу предположить, что это что-то связанное с «стержнем» вращения. Однако по умолчанию он установлен как центр холста, что кажется вполне уместным. Форма визуализируется далеко от точки поворота, что, по-видимому, вызывает эффект перевода как побочный эффект, поэтому возникает вопрос: как мне визуализировать все мои фигуры с фиксированным вращением и расположить их с определенным (x , y) шнуры, учитывая, что у меня есть алгоритм их позиционирования относительно центра Canvas?

Для справки, вот несколько выходных данных, отображающих одну фигуру, единственным изменяющимся свойством которой является угол поворота.

0f градусов

90 градусов

180 градусов

270 градусов

360f это то же самое, что и 0f

Это не похоже на то, что должно происходить здесь, но это так.

Квадрат – это BoxКомпонуемая и маленькая белая штучка вызывает озабоченность.

Answer 1

Он не применяет перемещение, а вращается вокруг оси, которая установлена ​​в центре Box.

rotateимеет параметр с именем, который решит вашу проблему:

      @Composable
fun Rotation() {
    val painter = rememberVectorPainter(image = Icons.Default.ThumbUp)
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Canvas(
            modifier = Modifier
                .height(200.dp)
                .background(color = Color.Red)
                .aspectRatio(1f)
        ) {
            with(painter) {
                repeat(4) {
                    rotate(
                        degrees = (it * 90f),
                        pivot = Offset(
                            painter.intrinsicSize.width * 2,
                            painter.intrinsicSize.height * 2
                        )
                    ) {
                        draw(
                            Size(100f, 100f),
                            colorFilter = ColorFilter.tint(Color.White)
                        )
                    }
                }
            }
        }
    }
}

Приведенный выше код дает такой результат:

Чтобы изменить точку, вокруг которой происходит вращение, просто измените координаты в pivotпараметр.