如何让这个三角形指示器在 android jetpack compose 中旋转和移动

作曲中的旋转非常简单.内部画布或实际DrawScope调用

rotate(value) {
  // Anything you draw here is rotate by angle in degrees
}

AS

val centerX = center.x
val centerY = center.y
val triangleWidthPx = triangleWidth.toPx()
val triangleHeightPx = triangleHeight.toPx()
val diff = offsetX.toPx()
val strokeWidthPx = strokeWidth.toPx()

val triangleStartX = centerX + radiusPx - diff

if (trianglePath.isEmpty) {
    trianglePath.apply {
        moveTo(triangleStartX, centerY - triangleHeightPx / 2)
        lineTo(triangleStartX + triangleWidthPx, centerY)
        lineTo(triangleStartX, centerY + +triangleHeightPx / 2)
        lineTo(triangleStartX, centerY - triangleHeightPx / 2)
    }
}


rotate(value) {
    drawPath(trianglePath, Color(0xff243f8d))
}

完整样品

游行示威

代码

@Composable
private fun CanvasRotationSample() {

    var value by remember {
        mutableStateOf(0f)
    }

    val diameter = 160.dp

    Spacer(modifier = Modifier.height(50.dp))
    Slider(value = value, onValueChange = { value = it }, valueRange = 0f..360f)
    Spacer(modifier = Modifier.height(50.dp))

    val trianglePath = remember {
        Path()
    }

    val triangleWidth = 24.dp
    val triangleHeight = 24.dp
    val offsetX = 2.dp
    Box(
        Modifier
            .fillMaxWidth()
            .aspectRatio(1f),
        contentAlignment = Alignment.Center
    ) {
        Canvas(
            modifier = Modifier.matchParentSize()
        ) {

            val radius = diameter.toPx() / 2
            val centerX = center.x
            val centerY = center.y
            val triangleWidthPx = triangleWidth.toPx()
            val triangleHeightPx = triangleHeight.toPx()
            val diff = offsetX.toPx()

            val triangleStartX = centerX + radius - diff

            if (trianglePath.isEmpty) {
                trianglePath.apply {
                    moveTo(triangleStartX, centerY - triangleHeightPx / 2)
                    lineTo(triangleStartX + triangleWidthPx, centerY)
                    lineTo(triangleStartX, centerY + +triangleHeightPx / 2)
                    lineTo(triangleStartX, centerY - triangleHeightPx / 2)
                }
            }

            rotate(value) {
                drawPath(trianglePath, Color(0xff243f8d))
            }
        }

        Box(
            modifier = Modifier
                .shadow(4.dp, CircleShape)
                .background(Color(0xfff9f9fa))
                .size(diameter)
                .padding(24.dp)
        ) {
            Box(
                modifier = Modifier
                    .shadow(1.dp, CircleShape)
                    .background(Color.White)
                    .matchParentSize()
                    .drawBehind {
                        drawArc(
                            color = Color(0xff6175ad),
                            useCenter = true,
                            startAngle = -60f,
                            sweepAngle = 120f
                        )
                    }
            )
        }
    }
}