老板：你怎么用Compose画了个墓碑。。。 点击关注公众号，“技术干货”及时达！ 老板：小伙子，新需求又来了，UI把页面设计出来了。下面就看你的了，看看能不能画出来。小伙子：没问题，包在我身上。 1、要实现的效果一个tabItem，tabItem选中的背景，要有圆角，上边的圆角是正常的圆角，下边的圆角是往外圆的圆角。看起来像个几。上图看效果 就是这样一个效果。发挥我聪明的才智，一顿分析2、实现思路2.1 三个View拼一下一顿分析下来，我觉得可以用三个View去拼一下， 左边View的右下角是圆角，背景色是蓝色，其他都是直角 中间View的右上角和左上角是圆角，背景色是白色，其他都是直角 右边View的左下角是圆角，背景色是蓝色，其他都是直角。然后把这三个View 一拼。完美，Perfect，Nice。 兄弟们，这个思路可行。是不是非常的nice。当然了为了不被兄弟们打，我提供了另一个思路。 2.2 使用Path画出来用Path 画一个这个背景 我是这样想的圆角的范围限定在一个边长为20px的矩形内，所有的圆角用二阶贝塞尔曲线去画。 第一步 先把起始点移到左下角，moveTo（0，height） 第二步 quadraticBezierTo(0,height,20,height-20) 「贝塞尔曲线不是三个点么，，怎么API只有两个点？」 第三步 lineto（20,20） 第四步 quadraticBezierTo(20,20,40,0) 第五步 linto（width-40,0） 第六步 quadraticBezierTo(width-40,0,width-20,20) 第七步 lineto （width-20,height-20） 第八步 quadraticBezierTo （width-20,height-20，width，height） 「小伙子：老板我画好了。」 「老板：运行一下，我看看效果」 「老板：」 「小伙子：」「问题出在哪呢？贝塞尔曲线不是三个点么，哦~」 Path 是个动态的过程，它一直有一个起始点。默认起始点是（0,0） moveto（0，height） 就是把笔尖，抬起来，挪到目标位置，参数是一个坐标。就可以了，此时起始点是（0，height） quadraticBezierTo(0,height,20,height-20)，贝塞尔曲线是三个点确定一个曲线，方法是两个参数，第一个是参考点，第二个是终点，起始点，Path 当前的位置，所以我的第一个参数填错了，第一个参数不是起始点，应该是参考点。我的参考点ABCD分别是。 代码改完之后的效果。 非常的满意，还是很nice的。上代码 Canvas(Modifier.size(120.dp,80.dp)){ valpath=Path().apply{ moveTo(0f,size.height) quadraticBezierTo(15f,size.height,20f,size.height-20f) lineTo(20f,20f) quadraticBezierTo(20f,5f,40f,0f) lineTo(size.width-40,0f) quadraticBezierTo(size.width-25f,0f,size.width-20f,20f) lineTo(size.width-20f,size.height-20f) quadraticBezierTo(size.width-20f,size.height-5f,size.width,size.height) close() } drawPath(path=path,color=backGroud,) } 3、总结加深了对Path的理解，方便以后自定义View 更加的得心应手。Path在开发中用到的还是挺多的，而且在Compose中Api更加的清晰明了，希望我踩到这个小坑对兄弟们有用。这几篇都是应用篇，等有时间，我再给大家详细介绍具体的用法。实现更炫酷的效果。这次这个墓碑我是真的绷不住了，所以分享给大家！ 点击关注公众号，“技术干货”及时达！ 阅读原文