老板:你怎么用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更加的清晰明了,希望我踩到这个小坑对兄弟们有用。这几篇都是应用篇,等有时间,我再给大家详细介绍具体的用法。实现更炫酷的效果。这次这个墓碑我是真的绷不住了,所以分享给大家!
点击关注公众号,“技术干货”及时达!
阅读原文
网站开发网络凭借多年的网站建设经验,坚持以“帮助中小企业实现网络营销化”为宗旨,累计为4000多家客户提供品质建站服务,得到了客户的一致好评。如果您有网站建设、网站改版、域名注册、主机空间、手机网站建设、网站备案等方面的需求...
请立即点击咨询我们或拨打咨询热线:13245491521 13245491521 ,我们会详细为你一一解答你心中的疑难。 项目经理在线