在 jetcompose 中使用 canvas 绘制对话泡泡

Question

我想在 jetcompose 中使用 canvas 绘制对话泡泡，但我不知道如何在矩形的底端画一个箭头
这是我的代码：

@Composable
fun DrawBubble(modifier: Modifier = Modifier) {
Box(modifier = modifier) {
    Canvas(modifier = Modifier.matchParentSize()) {
        val clipPath = Path().apply {
            lineTo(size.width, 0f)
            lineTo(size.width, 30f)
            lineTo(size.width, size.height)
            lineTo(0f, size.height)
            close()
        }
        clipPath(clipPath) {
            drawRoundRect(
                color = Color(0xffff0000),
                size = size,
                cornerRadius = CornerRadius(30f)
            )
        }
    }
}
}

我在想这样的事情：

但这是我的输出：

任何帮助将不胜感激

Answer 1

经过几次尝试，我终于画了这个：

代码：

@Composable
fun DrawBubble(
modifier: Modifier = Modifier
) {

Box(modifier = modifier) {
    val zero = 0.dp
    val fifty = 50.dp
    Canvas(modifier.matchParentSize().align(Alignment.Center)) {
        val clipPath = Path().apply {
            moveTo(zero.toPx(), fifty.toPx())
            quadraticBezierTo(5.dp.toPx(), 25.dp.toPx(), 40.dp.toPx(), 15.dp.toPx())
            quadraticBezierTo(60.dp.toPx(), 11.dp.toPx(), 80.dp.toPx(), 11.dp.toPx())
            quadraticBezierTo(60.dp.toPx(), 9.dp.toPx(), 140.dp.toPx(), 11.dp.toPx())
            quadraticBezierTo(190.dp.toPx(), 15.dp.toPx(), 200.dp.toPx(), 50.dp.toPx())
            quadraticBezierTo(200.dp.toPx(), 100.dp.toPx(), 100.dp.toPx(), 100.dp.toPx())
            quadraticBezierTo(0.dp.toPx(), 100.dp.toPx(), 0.dp.toPx(), 50.dp.toPx())
            /* lineTo(size.width, 0f)
             lineTo(size.width, 30f)
             lineTo(size.width, size.height)
             lineTo(0f, size.height)*/
            close()
            moveTo(180.dp.toPx(), 85.dp.toPx())

            lineTo(180.dp.toPx(), 90.dp.toPx())

            quadraticBezierTo(180.dp.toPx(), 100.dp.toPx(), 170.dp.toPx(), 125.dp.toPx())
            lineTo(140.dp.toPx(), 90.dp.toPx())
            close()
        }
        clipPath(clipPath) {
            drawPath(
                clipPath,
                color = Orange.copy(alpha = 0.7f),
            )
        }
    }
    Text(
        text = "click here to add task",
        fontSize = 12.sp,
        fontFamily = FontFamily.Monospace,
        fontWeight = FontWeight.Bold,
        modifier = Modifier.align(Alignment.Center).padding(bottom = 15.dp)
    )

}
}

在 jetcompose 中使用 canvas 绘制对话泡泡

drawing a speech bubble using canvas in jetcompose

android

kotlin

canvas

android-jetpack-compose