老板:小伙子,新需求又来了,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的。 上代码
Kotlin 代码解读复制代码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更加的清晰明了,希望我踩到这个小坑对兄弟们有用。这几篇都是应用篇,等有时间,我再给大家详细介绍具体的用法。实现更炫酷的效果。这次这个墓碑我是真的绷不住了,所以分享给大家!
评论记录:
回复评论: