贝塞尔曲线收录:二 cell描三边
来源:互联网 发布:linux服务器编程 知乎 编辑:程序博客网 时间:2024/05/29 16:26
故事背景:
这是自定义一个cell,cell的背景view是有灰色边框的,如下:
结果测试妹纸说难看,因为左边的边框太碍眼了,需要去掉。这个边框我是直接设置背景view的view.layer.borderColor
做的,去掉就4个边都去掉了。然后我想直接把图片往左移然后把背景view的clipsToBounds
关闭,但是右上角的tag标签是一个旋转label,背景view的clipsToBounds
关闭后它又冒出去了。。。
所以最后我决定还是不设置背景view的边框了,采用在上右下三边添加view的方式来完成这个需求。
说干就干
但我依稀记得在cell里添加太多控件不好,所以果断抛弃了那个想法。
最终还是决定画一画。
思路
结合CAShapeLayer
和贝塞尔曲线来打点描线。
CAShapeLayer与贝塞尔曲线
贝塞尔曲线是曲线,我却用它画直线。。。
然后那个CAShapeLayer它是CALayer的子类,它比CALayer多一个shape,意思就是说它是具有shape属性的layer,而这个shape需要贝塞尔曲线的配合才能发挥出来。反正我是这样理解的。
动手
一.首先你得有一个shapeLayer
CAShapeLayer *borderLayer = [CAShapeLayer layer]; // 位置大小 borderLayer.frame = bgView.bounds; // 线宽 borderLayer.lineWidth = 1; // 颜色 borderLayer.strokeColor = [UIColor colorWithHexString:@"dcdcdc"].CGColor; // 不填充 borderLayer.fillColor = nil; // 添加到指定layer [bgView.layer addSublayer:borderLayer];
二.然后你还得有一根曲线
1.创建曲线
// 创建path对象 UIBezierPath *borderPath = [UIBezierPath bezierPath];
2.打点描线
// 设置path起点 [borderPath moveToPoint:(CGPoint){124,0}]; // 依次设置转点 [borderPath addLineToPoint:(CGPoint){bgView.width,0}]; [borderPath addLineToPoint:(CGPoint){bgView.width,bgView.height}]; [borderPath addLineToPoint:(CGPoint){124,bgView.height}];
三.最后将shapeLayer和曲线完美结合
// 最后将这个path赋值给layer的path borderLayer.path = borderPath.CGPath;
最终效果是这样的
去掉左边框后确实更好看了,不得不说,测试妹纸的眼光还可以。
小demo一个
贝塞尔曲线
作者:无夜之星辰
链接:http://www.jianshu.com/p/d130b0f025ec
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
阅读全文
0 0
- 贝塞尔曲线收录:二 cell描三边
- 贝塞尔曲线收录:三 CAShapeLayer
- 贝塞尔曲线收录: 五,镂空效果的View+蒙版
- SVG 贝塞尔曲线学习二
- 贝塞尔曲线收录:一关于CAShapeLayer的一些实用案例和技巧
- 贝塞尔曲线收录:四,使用UIBezierPath和CAShapeLayer画各种图形
- Android 贝塞尔曲线(二)波浪
- 曲线平滑-贝塞尔曲线
- 2014-11-6Android学习------Android画笔实现画曲线--------贝塞尔曲线(二)
- 史上最全的贝塞尔曲线(Bezier)全解(二):Android中曲线的简单绘制
- android自定义View基础系列二(贝塞尔曲线)
- Android贝塞尔曲线 二阶的简单处理
- Android自定义控件(二 .3)Path贝塞尔曲线
- 贝塞尔曲线
- 贝塞尔曲线
- 贝塞尔曲线
- 贝塞尔曲线
- 贝塞尔曲线
- 第三方分享微信分享、朋友圈分享之iOS开发/Android开发
- 数组的扩容
- Linux下的SVN服务器的安装
- java版云笔记(二)
- CSS垂直居中实现
- 贝塞尔曲线收录:二 cell描三边
- java.lang.IllegalArgumentException: FormUrlEncoded can only be specified on HTTP methods with requ
- TransactionScope的使用--业务层使用多个方法实现回滚解决方案-业务层事务
- **A Cubic number and A Cubic Number**
- 【移动端】仿hover效果触发导航菜单展开
- 数据库索引之稠密索引和稀疏索引
- Android签名信息查看
- python的格式处理
- python网络爬虫-通过互联网采集