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

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一个

贝塞尔曲线