72 - Swift 之 CAShapeLayer& U
2017-09-21 本文已影响15人
NetWork小贱
前言
CAShapeLayer&UIBezierPath 在App开发绘制图形时占有很重要的地位。CAShapeLayer&UIBezierPath 两个类方法简单，使用方便，能满足我们的基本绘制需求。
CAShapeLayer 的方法介绍
// MARK: CAShapeLayer 的介绍
func IntroduceShapeLayer() -> Void {
// 创建对象
shapeLayer = CAShapeLayer()
shapeLayer = CAShapeLayer.init()
shapeLayer = CAShapeLayer.init(coder: NSCoder.init())
shapeLayer = CAShapeLayer.init(layer: self.layer)
// 添加路径
shapeLayer?.path = UIBezierPath().cgPath
// 路径的填充
shapeLayer?.fillColor = UIColor.red.cgColor
// 路径填充规则
shapeLayer?.fillRule = "even-odd" // "even-zero"
// 设置路径的颜色
shapeLayer?.strokeColor = UIColor.gray.cgColor
// 路径开始绘制的进度百分比
shapeLayer?.strokeStart = 0.2
shapeLayer?.strokeEnd = 0.8
// 设置路径的宽度
shapeLayer?.lineWidth = 6
// 设置路径的尾端形状 'butt'(和 square 一样，矩形), `round'（半圆形）* and `square'（矩形）。
shapeLayer?.lineCap = "butt"
// 设置路径结合处的形状 'miter'(切角), `round'（圆弧） and `bevel'（正切角）.
shapeLayer?.lineJoin = "miter"
// 设置绘制虚线的起始偏差值
shapeLayer?.lineDashPhase = 10
// 设置绘制虚线的间隔值
shapeLayer?.lineDashPattern = [10,20]
}
UIBezierPath 的方法&参数介绍
// MARK： 介绍UIBezierPath的一些方法
func IntroduceBezierPath(rect: CGRect) -> Void {
// 初始化 UIBezierPath
var BezierPath:UIBezierPath!
BezierPath = UIBezierPath.init()
BezierPath = UIBezierPath.init(rect:rect)
// Storyboard & Xib 创建的时候
BezierPath = UIBezierPath.init(coder: NSCoder.init())
// CGPath 路径创建 BezoerPath路径
BezierPath = UIBezierPath.init(cgPath: CGPath.init(rect: rect, transform: UnsafePointer.init(bitPattern: 2)))
// 一个椭圆路径
BezierPath = UIBezierPath.init(ovalIn: rect)
// 四边形带切记的路径
BezierPath = UIBezierPath.init(roundedRect: rect, cornerRadius: 2)
// 绘制一个圆形路径
BezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: 100, y: 100), radius: 30, startAngle: 0, endAngle: .pi, clockwise: true)
// 移动起始点
BezierPath.move(to: CGPoint.zero)
// 添加路线点
BezierPath.addLine(to: CGPoint.zero)
// 绘制单点控制曲线
BezierPath.addQuadCurve(to: CGPoint.zero, controlPoint: CGPoint.zero)
// 绘制双点控制曲线
BezierPath.addCurve(to: CGPoint.zero, controlPoint1: CGPoint.zero, controlPoint2: CGPoint.zero)
// 绘制圆形路径
BezierPath.addArc(withCenter: CGPoint.zero, radius: 30, startAngle: 0, endAngle: .pi, clockwise: true)
// 追加路径
BezierPath.append(BezierPath)
// 移除路径上的所有点
BezierPath.removeAllPoints()
// 关闭路径
BezierPath.close()
// 修改路径
BezierPath = BezierPath.reversing()
// 转化路径
BezierPath.apply(CGAffineTransform.identity)
// 获取路径的一些信息
// 判断路径是否存在
let isSave = BezierPath.isEmpty
print(isSave)
// 获取路径当前点
let cPoint = BezierPath.currentPoint
print(cPoint)
// 获取路径的rect
let PathRect = BezierPath.bounds
print(PathRect)
// 判断某点是否在路径上
let isContains = BezierPath.contains(CGPoint.zero)
print(isContains)
// 设置路径的宽度
BezierPath.lineWidth = 5
/**
设置路径头部的形状
CGLineCap 可选的类型如下:
@ butt 粗况的线段和square ,样式一样，是一个矩形（或则正方形）。
@ round 圆形的路径头部。
@ square 和butt形状一样。
*/
BezierPath.lineCapStyle = .butt
/**
设置路径结合处的形状
CGLineJoin 可选的类型如下:
@ miter 斜方切角
@ round 圆形
@ bevel 斜切角
*/
BezierPath.lineJoinStyle = .bevel
// 设置切角
BezierPath.miterLimit = 6
// 设置路径绘制的精度，精度越大，处理时间约长
BezierPath.flatness = 0.6
// 是否使用 even-oldfill 的填充规则
BezierPath.usesEvenOddFillRule = false
// 填充路径
BezierPath.fill()
// 闭合路径
BezierPath.stroke()
// 填充规则和深度
BezierPath.fill(with: .colorDodge, alpha: 1.0)
// 路径闭合的规则和路径透明度
BezierPath.stroke(with: .colorDodge, alpha: 1)
}
UIBezierPath 的一些图形的绘制
1、 四边形的绘制
// MARK: 绘制四边形
func drawQuadrilateral() -> UIBezierPath {
let BzPath = UIBezierPath.init()
BzPath.move(to: CGPoint.init(x: 50, y: 50))
BzPath.addLine(to: CGPoint.init(x: 250, y: 50))
BzPath.addLine(to: CGPoint.init(x: 250, y: 250))
BzPath.addLine(to: CGPoint.init(x: 50, y: 250))
BzPath.close()
return BzPath
}
/**
四边形绘制调用的方法
// 创建一个CALayer的对象
shapeLayer = CAShapeLayer.init()
// 路径赋值
shapeLayer?.path = self.drawQuadrilateral().cgPath
// 设置路径的颜色
shapeLayer?.strokeColor = UIColor.red.cgColor
// 设置路径围成区域的填充色
shapeLayer?.fillColor = UIColor.white.cgColor
// 设置路径的宽度
shapeLayer?.lineWidth = 6
// 向绘制的View上添加 layer
self.layer.addSublayer(shapeLayer!)
*/
效果图如下：
B229C63B-80C8-41FC-8FC5-729B5C829931.png
2、圆形的绘制
// MARK:绘制圆形
func drawArcBzPath() -> UIBezierPath {
let BzPath = UIBezierPath.init()
/**
绘制圆形
@ withCenter 圆的中心
@ radius 绘制圆的半径
@ startAngle 绘制圆开始的角度
@ endAngle 绘制圆结束的角度
@ clockwise 绘制圆的方向。 true为顺时针，false为逆时针方向
*/
BzPath.addArc(withCenter: CGPoint.init(x: self.bounds.width * 0.5, y: self.bounds.height*0.5), radius: 50, startAngle: 0, endAngle: .pi * 2, clockwise: true)
// 绘绘制结束
BzPath.stroke()
return BzPath
}
/**
圆绘制调用的方法
// 创建一个CALayer的对象
shapeLayer = CAShapeLayer.init()
// 路径赋值
shapeLayer?.path = self.drawArcBzPath().cgPath
// 设置路径的颜色
shapeLayer?.strokeColor = UIColor.red.cgColor
// 设置路径围成区域的填充色
shapeLayer?.fillColor = UIColor.white.cgColor
// 设置路径的宽度
shapeLayer?.lineWidth = 6
// 向绘制的View上添加 layer
self.layer.addSublayer(shapeLayer!)
*/
效果图如下：
9D252CD4-B28E-40D3-A575-9C056C632A48.png
3、曲线的绘制
// 绘制贝塞尔曲线
func drawBesselCurve(controlPoints:Bool) -> UIBezierPath {
let BzPath = UIBezierPath.init()
// 添加起始点
BzPath.move(to: CGPoint.init(x: 10, y: 150))
if controlPoints {
/**
双点控制曲线
@ to 曲线结束点
@ controlPoint1 控制曲线点一
@ controlPoint2 控制曲线点二
*/
BzPath.addCurve(to: CGPoint.init(x: 290, y: 150), controlPoint1: CGPoint.init(x: 100, y: 50), controlPoint2: CGPoint.init(x: 200, y: 250))
}else {
/**
单点控制器曲线
@ to 曲线结束点
@ controlPoint 控制曲线点一
*/
BzPath.addQuadCurve(to: CGPoint.init(x: 290, y: 150), controlPoint: CGPoint.init(x: 150, y: 50))
}
// 闭合曲线
BzPath.stroke()
return BzPath
}
/**
贝塞尔曲线的绘制调用的方法
// 创建一个CALayer的对象
shapeLayer = CAShapeLayer.init()
// 路径赋值
shapeLayer?.path = self.drawBesselCurve(controlPoints: false).cgPath
// 设置路径的颜色
shapeLayer?.strokeColor = UIColor.red.cgColor
// 设置路径的宽度
shapeLayer?.lineWidth = 6
// 向绘制的View上添加 layer
self.layer.addSublayer(shapeLayer!)
*/
效果图如下：
306E11EC-8B5F-4CB6-B6A1-3CD62B5754AC.png
D8ECCFEC-7079-4D7D-95E2-339460875A0A.png
4、虚线的绘制
// MARK: 虚线绘制
func drawDashLine() -> UIBezierPath {
let BzPath = UIBezierPath.init()
BzPath.move(to: CGPoint.init(x: 10, y: 150))
BzPath.addLine(to: CGPoint.init(x: 290, y: 150))
return BzPath
}
/**
绘制虚线的调用方法
// 创建对象
shapeLayer = CAShapeLayer.init()
// 设置路径
shapeLayer?.path = self.drawDashLine().cgPath
// 设置路径的颜色
shapeLayer?.strokeColor = UIColor.red.cgColor
// 设置虚线的间隔
shapeLayer?.lineDashPattern = [10,20];
// 设置路径的宽度
shapeLayer?.lineWidth = 6
// 路径的渲染
self.layer.addSublayer(shapeLayer!)
*/
效果图如下：
4F7E987B-80E6-4239-94CB-1CAE1BB19029.png
5、 绘制椭圆
// MARK: 绘制椭圆
func drawEllipse() -> UIBezierPath {
let BzPath = UIBezierPath.init(ovalIn: CGRect.init(x: 10, y: 75, width: 280, height: 150))
return BzPath
}
/**
绘制椭圆的调用方法
// 创建一个CALayer的对象
shapeLayer = CAShapeLayer.init()
// 路径赋值
shapeLayer?.path = drawEllipse().cgPath
// 设置路径的颜色
shapeLayer?.strokeColor = UIColor.red.cgColor
// 设置路径围成区域的填充色
shapeLayer?.fillColor = UIColor.white.cgColor
// 设置路径的宽度
shapeLayer?.lineWidth = 6
// 向绘制的View上添加 layer
self.layer.addSublayer(shapeLayer!)
*/
效果图如下：
FD5E27B3-504D-4178-871D-C4E85A5366A7.png
