老板：你怎么用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)) {
    val path = 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更加的清晰明了，希望我踩到这个小坑对兄弟们有用。这几篇都是应用篇，等有时间，我再给大家详细介绍具体的用法。实现更炫酷的效果。这次这个墓碑我是真的绷不住了，所以分享给大家！

点击关注公众号，“技术干货” 及时达！