Jetpack Compose中Vector Group缩放如何正确设置pivotX/Y？

要让特定省份区域以自身中心缩放，核心是计算该省份Path的包围盒中心，将其设为Group的pivotX和pivotY，具体步骤如下：

1. 获取省份Path的边界矩形 #

每个省份的Path都有自己的边界范围，通过Path.getBounds()方法可以得到包含该路径的最小矩形（Rect），里面包含了路径的left、top、right、bottom坐标。

2. 计算中心坐标 #

从边界矩形直接取中心值，就是该省份的中心点：

val pathBounds = provincePath.getBounds()
val pivotX = pathBounds.centerX()
val pivotY = pathBounds.centerY()

3. 应用到Group的缩放动画 #

将计算出的pivot值绑定到Group的属性上，配合缩放动画即可实现以自身中心缩放的效果。

完整代码示例 #

@Composable
fun NetherlandsMap() {
    // 模拟北荷兰省的路径（实际替换为你的省份路径数据）
    val northHollandPath = remember {
        Path().apply {
            moveTo(100f, 200f)
            lineTo(150f, 180f)
            lineTo(200f, 220f)
            lineTo(160f, 250f)
            close()
        }
    }

    // 计算路径边界和中心点
    val pathBounds = remember(northHollandPath) { northHollandPath.getBounds() }
    val pivotX = pathBounds.centerX()
    val pivotY = pathBounds.centerY()

    // 缩放动画状态
    val isSelected = remember { mutableStateOf(false) }
    val scale by animateFloatAsState(
        targetValue = if (isSelected.value) 1.15f else 1f,
        animationSpec = tween(durationMillis = 300),
        label = "ProvinceScale"
    )

    Canvas(modifier = Modifier.fillMaxSize().clickable { isSelected.value = !isSelected.value }) {
        // 绘制整个地图背景（省略其他省份）
        drawPath(
            path = northHollandPath,
            color = if (isSelected.value) Color(0xFF4CAF50) else Color(0xFFBDBDBD)
        )

        // 用Group逻辑实现缩放动画
        withTransform({
            scale(scale, scale, pivot = Offset(pivotX, pivotY))
        }) {
            drawPath(
                path = northHollandPath,
                color = Color(0xFF2196F3),
                style = Stroke(width = 2f)
            )
        }
    }
}

注意事项 #

• 如果你的路径是从XML Vector资源中获取的，需要先将pathData字符串解析为Compose的Path对象，再计算边界：

  val pathDataString = "M100 200 L150 180 L200 220 L160 250 Z" // XML中的pathData
  val provincePath = remember { Path().apply { addPath(PathDataParser.parsePathData(pathDataString)) } }
  

• 确保路径坐标是省份自身的相对坐标，而非整个地图的绝对坐标，否则计算出的中心会偏移。

内容的提问来源于stack exchange，提问作者Niels Masdorp