Android Compose：消除同色透明重叠图形的拼接线条方案咨询

你遇到的拼接线条问题，本质是两个独立Box组件堆叠时，绘制层级和抗锯齿逻辑导致的视觉缝隙。用Canvas是完全可行的，而且是彻底解决这类问题的最优方案之一。另外也可以通过自定义Shape将椭圆和箭头做成一个整体，从根源上避免堆叠带来的问题。

方法一：使用Canvas绘制完整Pin形状 #

直接通过Canvas一次性绘制椭圆和箭头的组合形状，这样整个Pin是一个绘制单元，不会有拼接缝隙，也不会出现颜色混合问题：

@Composable
private fun Pin(pinColor: Color, icon: Painter) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier.wrapContentSize()
    ) {
        Canvas(modifier = Modifier.size(40.dp, 48.dp)) {
            // 绘制上方椭圆区域
            val ovalSize = Size(size.width, size.height - 8.dp.toPx())
            drawOval(
                color = pinColor,
                size = ovalSize
            )
            // 绘制下方箭头三角形
            val trianglePath = Path().apply {
                moveTo(size.width / 2, size.height - 8.dp.toPx())
                lineTo(size.width / 2 - 6.dp.toPx(), size.height)
                lineTo(size.width / 2 + 6.dp.toPx(), size.height)
                close()
            }
            drawPath(
                path = trianglePath,
                color = pinColor
            )
        }
        // 内部图标与文字
        Row(
            modifier = Modifier.padding(6.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                painter = icon,
                contentDescription = null,
                modifier = Modifier.size(16.dp)
            )
            Text(
                text = "2",
                modifier = Modifier.padding(start = 2.dp, end = 2.dp)
            )
        }
    }
}

方法二：自定义Shape实现整体形状 #

将椭圆和箭头组合成一个自定义Shape，用单个Box的background属性设置该形状，同样能避免堆叠问题：

class PinShape(private val arrowHeight: Dp) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val arrowHeightPx = with(density) { arrowHeight.toPx() }
        val path = Path().apply {
            // 添加椭圆路径
            addOval(Rect(0f, 0f, size.width, size.height - arrowHeightPx))
            // 添加箭头三角形路径
            moveTo(size.width / 2, size.height - arrowHeightPx)
            lineTo(size.width / 2 - size.width / 4, size.height)
            lineTo(size.width / 2 + size.width / 4, size.height)
            close()
        }
        return Outline.Generic(path)
    }
}

// 使用自定义Shape的Pin组件
@Composable
private fun Pin(pinColor: Color, icon: Painter) {
    Box(
        modifier = Modifier
            .size(40.dp, 48.dp)
            .background(
                color = pinColor,
                shape = PinShape(arrowHeight = 8.dp)
            ),
        contentAlignment = Alignment.Center
    ) {
        Row(
            modifier = Modifier.padding(6.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                painter = icon,
                contentDescription = null,
                modifier = Modifier.size(16.dp)
            )
            Text(
                text = "2",
                modifier = Modifier.padding(start = 2.dp, end = 2.dp)
            )
        }
    }
}

为什么之前的方案有问题 #

两个独立Box堆叠时，即使调整alpha解决颜色混合，Compose的绘制系统会对每个Box单独做抗锯齿处理，导致拼接处出现细微缝隙。而上述两种方法都是将整个Pin形状作为单一绘制单元，从根源上消除了堆叠带来的视觉问题。

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