Jetpack Compose中缩放时Circle同步变大的原因咨询

你设置的graphicsLayer会对后续所有绘制操作应用缩放变换，包括drawWithContent里的红色圆。因为Jetpack Compose的Modifier是按顺序执行的，graphicsLayer之后的绘制流程都会被这个缩放矩阵影响，所以圆的实际视觉半径会变成20f * zoom，导致跟着缩放变大。

方法一：分离缩放内容与固定绘制（推荐） #

用Box嵌套布局，让缩放只作用于需要缩放的内容，固定圆单独在外层绘制，完全不受缩放影响：

var centroid by remember { mutableStateOf(Offset.Zero) }
var zoom by remember { mutableStateOf(1f) }
val decimalFormat = remember { DecimalFormat("0.0") }

var transformDetailText by remember {
    mutableStateOf(
        "Use pinch gesture to zoom in or out.\n" +
                "Centroid is position of center of touch pointers"
    )
}

Box(modifier = Modifier.fillMaxSize()) {
    // 需要缩放的内容（比如图片）
    Image(
        painter = painterResource(R.drawable.your_image),
        contentDescription = "Scalable content",
        modifier = Modifier
            .matchParentSize()
            .pointerInput(Unit) {
                detectTransformGestures(
                    onGesture = { gestureCentroid, _, gestureZoom, _ ->
                        centroid = gestureCentroid
                        val newZoom = zoom * gestureZoom
                        zoom = newZoom.coerceIn(0.5f, 5f)

                        transformDetailText = "Zoom: ${decimalFormat.format(zoom)}, centroid: $centroid"
                    }
                )
            }
            .graphicsLayer {
                scaleX = zoom
                scaleY = zoom
            }
    )
    // 固定半径的红色圆，不受缩放影响
    Canvas(modifier = Modifier.matchParentSize()) {
        drawCircle(color = Color.Red, center = centroid, radius = 20f)
    }
}

方法二：在drawWithContent中单独控制变换 #

移除graphicsLayer，在drawWithContent里对原始内容单独应用缩放，绘制圆时不做变换：

var centroid by remember { mutableStateOf(Offset.Zero) }
var zoom by remember { mutableStateOf(1f) }
val decimalFormat = remember { DecimalFormat("0.0") }

var transformDetailText by remember {
    mutableStateOf(
        "Use pinch gesture to zoom in or out.\n" +
                "Centroid is position of center of touch pointers"
    )
}

val imageModifier = Modifier
    .fillMaxSize()
    .pointerInput(Unit) {
        detectTransformGestures(
            onGesture = { gestureCentroid, _, gestureZoom, _ ->
                centroid = gestureCentroid
                val newZoom = zoom * gestureZoom
                zoom = newZoom.coerceIn(0.5f, 5f)

                transformDetailText = "Zoom: ${decimalFormat.format(zoom)}, centroid: $centroid"
            }
        )
    }
    .drawWithContent {
        // 仅对原始内容应用缩放
        withTransform({
            scale(zoom, zoom)
        }) {
            drawContent()
        }
        // 直接绘制固定半径的圆
        drawCircle(color = Color.Red, center = centroid, radius = 20f)
    }

// 使用这个Modifier的组件（比如Image）
Image(
    painter = painterResource(R.drawable.your_image),
    contentDescription = "Scalable content",
    modifier = imageModifier
)

方法三：抵消缩放对圆的影响（最小改动原代码） #

保留原有的graphicsLayer，通过将圆的半径除以zoom来抵消缩放的放大效果，这样视觉上圆的大小始终保持20f：

var centroid by remember { mutableStateOf(Offset.Zero) }
var zoom by remember { mutableStateOf(1f) }
val decimalFormat = remember { DecimalFormat("0.0") }

var transformDetailText by remember {
    mutableStateOf(
        "Use pinch gesture to zoom in or out.\n" +
                "Centroid is position of center of touch pointers"
    )
}

val imageModifier = Modifier
    .fillMaxSize()
    .pointerInput(Unit) {
        detectTransformGestures(
            onGesture = { gestureCentroid, _, gestureZoom, _ ->
                centroid = gestureCentroid
                val newZoom = zoom * gestureZoom
                zoom = newZoom.coerceIn(0.5f, 5f)

                transformDetailText = "Zoom: ${decimalFormat.format(zoom)}, centroid: $centroid"
            }
        )
    }
    .graphicsLayer {
        scaleX = zoom
        scaleY = zoom
    }
    .drawWithContent {
        drawContent()
        // 用半径除以zoom抵消缩放影响
        drawCircle(color = Color.Red, center = centroid, radius = 20f / zoom)
    }

内容的提问来源于stack exchange，提问作者Ayush Singhal