Swift-虚线绘制

iOS中有时候会遇到虚线绘制，关于绘制虚线有两种方式，一种是通过Context绘制图片通过UIImageView展示虚线，第二中通过CAShapeLayer的形式设置虚线.

Context绘制虚线

简单看一下实现效果:

FlyElephant.png

除了最后一行，前面都是通过Context来实现的，主要是针对几个属性的设置来进行详细设置.
核心代码:

let imgView:UIImageView = UIImageView(frame: CGRect(x: 0, y: 100, width: self.view.frame.width, height: 20))
        self.view.addSubview(imgView)
        
        UIGraphicsBeginImageContext(imgView.frame.size) // 位图上下文绘制区域
        imgView.image?.draw(in: imgView.bounds)
        
        let context:CGContext = UIGraphicsGetCurrentContext()!
        
        context.setLineCap(CGLineCap.square)
        
        let lengths:[CGFloat] = [10,20] // 绘制 跳过 无限循环
        
        context.setStrokeColor(UIColor.red.cgColor)
        context.setLineWidth(5)
        context.setLineDash(phase: 0, lengths: lengths)
        context.move(to: CGPoint(x: 0, y: 10))
        context.addLine(to: CGPoint(x: self.view.frame.width, y: 10))
        context.strokePath()
        
        imgView.image = UIGraphicsGetImageFromCurrentImageContext()

基本设置绘制区域，区域颜色，线条高度，有一个需要介绍的方式是:

  context.setLineDash(phase: 0, lengths: lengths)

虚线设置两个重要参数:
①phase表示开始绘制之前跳过多少点进行绘制，默认一般设置为0，第二张图片是设置5的实际效果图.

②lengths通常都包含两个数字，第一个是绘制的宽度，第二个表示跳过的宽度，也可以设置多个，第三张图是设置为三个参数的实际效果图.绘制按照先绘制，跳过，再绘制，再跳过，无限循环.

 let lengths:[CGFloat] = [10,20,10] // 绘制 跳过 无限循环

项目中有的时候遇到，单一颜色虚线太单调，如果想设置两种颜色的虚线，设置多种线条路径，可以根据起始位置来控制.

context.move(to: CGPoint(x: 15, y: 10))

倒数第二张图实现代码:

let imgView:UIImageView = UIImageView(frame: CGRect(x: 0, y: 250, width: self.view.frame.width, height: 20))
        self.view.addSubview(imgView)
        
        UIGraphicsBeginImageContext(imgView.frame.size) // 位图上下文绘制区域 FlyElephant
        imgView.image?.draw(in: imgView.bounds)
        
        let context:CGContext = UIGraphicsGetCurrentContext()!
        
        context.setLineCap(CGLineCap.square)
        
        let lengths:[CGFloat] = [10,20] // 绘制 跳过 无限循环
        
        context.setStrokeColor(UIColor.red.cgColor)
        context.setLineWidth(2)
        context.setLineDash(phase: 0, lengths: lengths)
        context.move(to: CGPoint(x: 0, y: 10))
        context.addLine(to: CGPoint(x: self.view.frame.width, y: 10))
        context.strokePath()
        
        context.setStrokeColor(UIColor.blue.cgColor)
        context.setLineWidth(2)
        context.setLineDash(phase: 0, lengths: lengths)
        context.move(to: CGPoint(x: 15, y: 10))
        context.addLine(to: CGPoint(x: self.view.frame.width, y: 10))
        context.strokePath()
        
        imgView.image = UIGraphicsGetImageFromCurrentImageContext()

CAShapeLayer 实现方式

第一种方式实现起来非常方便，关于context的使用Swift中已经简化了很多代码，不会像OC中那么冗余，实现起来那么费劲.CAShapeLayer实现起来与Context相比大同小异.
核心代码:

let lineView:UIView = UIView(frame: CGRect(x: 0, y: 300, width: self.view.frame.width, height: 20))
        self.view.addSubview(lineView)
        
        let shapeLayer:CAShapeLayer = CAShapeLayer()
        
        shapeLayer.bounds = lineView.bounds
        
        shapeLayer.position = CGPoint(x: lineView.frame.width / 2, y: lineView.frame.height / 2)
        
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.red.cgColor
        
        shapeLayer.lineWidth = 5
        shapeLayer.lineJoin = kCALineJoinRound
        shapeLayer.lineDashPhase = 0
        shapeLayer.lineDashPattern = [NSNumber(value: 10), NSNumber(value: 20)]
        
        let path:CGMutablePath = CGMutablePath()
        path.move(to: CGPoint(x: 0, y: 10))
        path.addLine(to: CGPoint(x: lineView.frame.width, y: 10))
        shapeLayer.path = path
        
        lineView.layer.addSublayer(shapeLayer)