iOS中有时候会遇到虚线绘制,关于绘制虚线有两种方式,一种是通过Context绘制图片通过UIImageView展示虚线,第二中通过CAShapeLayer的形式设置虚线.
Context绘制虚线
简单看一下实现效果:
除了最后一行,前面都是通过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)