贝塞尔曲线

iOS开发之UIView 画虚线框

2021-10-20  本文已影响0人  我是卖报的小行家

一般开发过程中可能会遇到绘制虚线框的需求,如下图所示

虚线框

核心思想:view设置layer样式即可,此时可以用到的layer类型为CAShapeLayer

CAShapeLayer是继承自CALayer的. 因此可以使用CALayer的所有属性, 但是, CAShapeLayer需要和UIBezierPath曲线配合使用才有意义.
CAShapeLayer有一个path属性, 而UIBezierPath就是对CGPathRef类型的封装(CGPathRef 是CGPath的重命名 , 实质就是CGPath). 因此这两者需要配合使用.

1.CAShapeLayer中Shape代表形状, 所以需要形状才能生效
2.贝塞尔曲线给CAShapeLayer提供路径, CAShapeLayer在提供的路径中进行渲染. 路径会闭环, 所以绘制出了shape.
3.用于CAShapeLayer的贝塞尔曲线作为path, 其path是一个首尾相接的闭环的曲线. 即使给定的贝塞尔曲线不是一个闭环的曲线.

所以有了思路就开始着手代码

    UIView * view = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 200, 200)];
    view.layer.cornerRadius = 5;
    view.backgroundColor = [UIColor whiteColor];
    
    [self.view addSubview:view];
    
    CAShapeLayer *border = [CAShapeLayer layer];
    
    border.strokeColor = [UIColor blackColor].CGColor;
    
    border.fillColor = [UIColor systemGreenColor].CGColor;
    
    UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:view.bounds cornerRadius:5];
    
    border.path = path.CGPath;
    
    border.frame = view.frame;
    
    //线宽(厚度)
    border.lineWidth = 1.f;
    
    //虚线的间隔(线长和间隔)
    
    border.lineDashPattern = @[@(5),@(5)];
    
    [self.view.layer addSublayer:border];

部分内容摘自此片华文https://www.jianshu.com/p/50a1d9f451ee

上一篇下一篇

猜你喜欢

热点阅读