Jetpack Compose中如何不旋转Canvas仅旋转Path路径

你当前通过三角函数计算旋转后端点的方式可行，但Compose提供了更直观的路径变换和坐标系旋转API，无需手动计算坐标。以下是两种优化方案，同时修复原代码中复用同一Path实例导致的路径重叠问题：

方案1：绘制时局部旋转坐标系 #

利用drawScope.rotate函数，以点击位置为旋转中心，在旋转后的坐标系中绘制直线，无需修改Path本身：

package customCanvas

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.awaitFirstDown
import androidx.compose.foundation.gestures.forEachGesture
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.*
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.input.pointer.pointerInput

@Composable
fun CustomCanvas() {
    data class DrawnLine(val start: Offset, val angle: Float)
    val lines = remember { mutableStateListOf<DrawnLine>() }
    val randomAngles = listOf(45f, -45f)

    Canvas(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Gray)
            .pointerInput(Unit) {
                forEachGesture {
                    awaitPointerEventScope {
                        awaitFirstDown().also {
                            val startPos = it.position
                            val angle = randomAngles.random()
                            lines.add(DrawnLine(startPos, angle))
                        }
                    }
                }
            }
    ) {
        lines.forEach { line ->
            // 以点击点为中心旋转坐标系
            rotate(degrees = line.angle, pivot = line.start) {
                drawLine(
                    color = Color.Black,
                    start = line.start,
                    end = line.start + Offset(40f, 0f), // 沿X轴绘制固定长度直线
                    strokeWidth = 4f,
                    cap = StrokeCap.Round
                )
            }
        }
    }
}

方案2：预变换Path后存储 #

如果需要直接存储旋转后的Path，可以使用Path.transform通过矩阵实现平移+旋转变换：

package customCanvas

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.awaitFirstDown
import androidx.compose.foundation.gestures.forEachGesture
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.*
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.input.pointer.pointerInput
import kotlin.math.toRadians

@Composable
fun CustomCanvas() {
    val paths = remember { mutableStateListOf<Path>() }
    val randomAngles = listOf(45f, -45f)
    val lineLength = 40f

    Canvas(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Gray)
            .pointerInput(Unit) {
                forEachGesture {
                    awaitPointerEventScope {
                        awaitFirstDown().also {
                            val startPos = it.position
                            val angleDeg = randomAngles.random()

                            // 创建基础直线Path（从原点到(40,0)）
                            val basePath = Path().apply {
                                moveTo(0f, 0f)
                                lineTo(lineLength, 0f)
                            }

                            // 创建变换矩阵：先旋转，再平移到点击位置
                            val transform = Matrix().apply {
                                postRotate(angleDeg)
                                postTranslate(startPos.x, startPos.y)
                            }

                            // 应用变换并添加到列表
                            val rotatedPath = basePath.transform(transform)
                            paths.add(rotatedPath)
                        }
                    }
                }
            }
    ) {
        paths.forEach { path ->
            drawPath(
                color = Color.Black,
                path = path,
                style = Stroke(
                    width = 4f,
                    cap = StrokeCap.Round,
                    join = StrokeJoin.Round
                )
            )
        }
    }
}

关键优化点说明 #

1. 修复Path复用问题：原代码中currentPath是同一个实例，每次修改会影响已添加到paths中的所有路径。优化方案中每次点击都创建新的Path或数据对象，避免状态污染。
2. 避免手动坐标计算：利用Compose内置的rotate或Matrix变换API，将旋转逻辑交给框架处理，代码更简洁易维护。
3. 两种方案的适用场景：
   • 方案1适合需要动态调整旋转角度、或无需存储Path实例的场景，内存占用更低。
   • 方案2适合需要持久化存储旋转后Path的场景，比如后续需要对路径进行编辑。

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