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

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

作者: Lol刀妹 | 来源:发表于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该页面无法显示:测试妹子的照片在哪里?
        Lol刀妹:@404该页面无法显示 不给看:no_mouth:
      • 周牛:冲着美女图进来的
      • 这是我的猫头:不愧是快健康。。。。
      • 王仁洁:额…
        Lol刀妹:@王仁洁 :sweat_smile:

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

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