如何在 Jetpack Compose 中绘制圆的交集

Question

我尝试在第二个圆上使用

BlendMode.DstIn

绘制两个圆的交集以掩盖第一个圆，但结果仅显示第一个圆，没有任何修改。

@Composable
fun BlendModeTest() {
    Canvas(
        modifier = Modifier
            .fillMaxSize()
            .graphicsLayer(alpha = 0.99f, compositingStrategy = CompositingStrategy.Offscreen)
    ) {
        drawCircle(Color.Cyan, 300f, Offset(500f, 500f))
        drawCircle(Color.Black, 300f, Offset(700f, 500f), blendMode = BlendMode.DstIn)
    }
}

预期结果：

实际：

我做错了什么，我应该使用不同的

BlendMode

吗？

Answer 1

您正在将混合模式应用于黑色圆圈。它与青色圆圈交互的最大程度是相交，但青色圆圈的左侧将仍然存在，因为没有混合模式应用于该部分。

检查下面的链接。当混合模式应用于目标图像时，目标图像会覆盖其他图像，具体取决于它应用于每个像素的混合模式。

https://developer.android.com/reference/android/graphics/PorterDuff.Mode

您可以使用带有

PathOperation.Intersection

的路径来获得所需的结果。

@Preview
@Composable
fun IntersectionTest() {
    
    val path = remember {
        Path()
    }

    
    Canvas(
        modifier = Modifier
            .fillMaxSize()
    ) {

        if (path.isEmpty) {


            val tempPath1 = Path().apply {
                addOval(
                    Rect(
                        radius = 300f,
                        center = Offset(500f, 500f)
                    )
                )
            }

            val tempPath2 = Path().apply {
                addOval(
                    Rect(
                        radius = 300f,
                        center = Offset(700f, 500f)
                    )
                )
            }

            val diffPath = Path.combine(
                operation = PathOperation.Intersect,
                path1 = tempPath1,
                path2 = tempPath2
            )

            path.addPath(diffPath)

        }

        drawPath(path, color = Color.Cyan)
    }
}