美文网首页iOS 临点记录iOS开发实用技术iOS Developer
iOS开发笔记 | 贝塞尔曲线在项目中的实际运用:描三边

iOS开发笔记 | 贝塞尔曲线在项目中的实际运用:描三边

作者: 无夜之星辰 | 来源:发表于2017-06-15 19:29 被阅读549次
iu

故事背景:

这是自定义一个cell,cell的背景view是有灰色边框的,如下:


结果测试妹纸说难看,因为左边的边框太碍眼了,需要去掉。这个边框我是直接设置背景view的view.layer.borderColor做的,去掉就4个边都去掉了。然后我想直接把图片往左移然后把背景view的clipsToBounds关闭,但是右上角的tag标签是一个旋转label,背景view的clipsToBounds关闭后它又冒出去了。。。
所以最后我决定还是不设置背景view的边框了,采用在上右下三边添加view的方式来完成这个需求。 最终还是笑了.gif

说干就干

但我依稀记得在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一个

贝塞尔曲线

相关文章

网友评论

  • xiAo__Ju:我是这样
    func addBorder(_ edges: [UIRectEdge], color: UIColor = APPConfigCenter.separator, thickness: CGFloat = 0.5) {

    edges.forEach { (edge) in
    let border = CALayer()

    switch edge {
    case UIRectEdge.top:
    border.frame = CGRect(x: 0, y: 0, width: frame.width, height: thickness)
    case UIRectEdge.bottom:
    border.frame = CGRect(x: 0, y: frame.height - thickness, width: frame.width, height: thickness)
    case UIRectEdge.left:
    border.frame = CGRect(x: 0, y: 0, width: thickness, height: frame.height)
    case UIRectEdge.right:
    border.frame = CGRect(x: frame.width - thickness, y: 0, width: thickness, height: frame.height)
    break
    default:
    break
    }

    border.backgroundColor = color.cgColor

    addSublayer(border)
    }
    }
  • 404该页面无法显示:测试妹子的照片在哪里?
    无夜之星辰:@404该页面无法显示 不给看:no_mouth:
  • 周牛:冲着美女图进来的
  • 这是我的猫头:不愧是快健康。。。。
  • 王仁洁:额…
    无夜之星辰:@王仁洁 :sweat_smile:

本文标题:iOS开发笔记 | 贝塞尔曲线在项目中的实际运用:描三边

本文链接:https://www.haomeiwen.com/subject/qhquqxtx.html