71-Swift之上下文(CGContext)的介绍和图形绘制使
2017-09-19 本文已影响39人
NetWork小贱
前言
上下文（CGContext） 是图形绘制前，场景的布置对象。在App的开发中，图形的绘制也是基本的技能。图形绘制的选择要求开发者根据实际情况选择不同的绘制方式。今天我们带来的是 CGContext的绘制。
CGContext 的绘制图形
1、绘制虚线
// MARK: 绘制虚线
func drawDottedLine(rect: CGRect,context:CGContext) -> Void {
// 设置绘制的颜色
UIColor.red.set()
// 设置宽度
context.setLineWidth(10)
// 设置起始点
context.move(to: CGPoint.init(x: 10, y: 50))
// 添加绘制路径点
context.addLine(to: CGPoint.init(x: 200, y: 50))
/**
绘制虚线
@phase : 虚线起始线段的长度偏差,则第一段的长度为: lengths[0] - phase
@lengths : 一个存放虚线间隔和绘制长度的数组
*/
context.setLineDash(phase: 10, lengths: [10,20,30])
// 必和路径
context.strokePath()
}
效果如下图：
88F0F6A3-F801-4456-9AD2-4C7C46873024.png
2、绘制曲线
// MARK: 绘制曲线
func drawCurve(rect: CGRect,context:CGContext) -> Void {
// 设置绘制的颜色
UIColor.red.set()
// 设置宽度
context.setLineWidth(5)
// 设置起始点
context.move(to: CGPoint.init(x: 10, y: 50))
/**
两点控制曲线
to : 曲线的结束点
control1 : 曲线控制点一。
control2 : 曲线控制点二
例子：
context.addCurve(to: CGPoint.init(x: 250, y: 180), control1: CGPoint.init(x: 100, y: 200), control2: CGPoint.init(x: 200, y: 70))
*/
/**
单点控制曲线
to : 曲线的结束点
control: 曲线的控制点
*/
context.addQuadCurve(to: CGPoint.init(x: 250, y: 180), control: CGPoint.init(x: 100, y: 200))
// 必和路径
context.strokePath()
}
效果图如下
A9079F58-0173-410B-915D-FB2E2FE8A149.png
A978A3FF-9108-4ABD-870B-04BCB170F78C.png
3、 绘制四变形
// MARK: 绘制四变形
func drawRect(rect: CGRect,context:CGContext) -> Void {
// 设置绘制的颜色
UIColor.red.set()
// 设置宽度
context.setLineWidth(5)
/**
设置绘制四边形的大小，通过控制长和宽绘制长方形和正方形
@ x : 四边形的起点X轴的位置。
@ y : 四边形的起点Y轴的位置。
@ width : 绘制四边形的宽度。
@ height : 绘制四边形的高度。
注意： width = height 绘制的是正方形
*/
context.addRect(CGRect.init(x: 60, y: 20, width: 160, height: 160))
// 必和路径
context.strokePath()
}
效果图如下：
E3722BA7-B7CA-4C5D-BD6C-BF42BE4DB786.png
46E8A830-2248-4F21-A539-DB2FB02C4E0B.png
4、绘制多点之间的连线
// MAKR: 绘制多点之间的连线
func drawLines(rect: CGRect,context:CGContext) -> Void {
// 设置绘制的颜色
UIColor.red.set()
// 设置宽度
context.setLineWidth(5)
/**
绘制各点之间的线段
@ between : 存放的点的数组。
*/
context.addLines(between: [CGPoint.init(x: 10, y: 50),CGPoint.init(x: 20, y: 30),CGPoint.init(x: 100, y: 150),CGPoint.init(x: 200, y: 20),CGPoint.init(x: 250, y: 70)])
// 必和路径
context.strokePath()
}
效果图如下：
B15F9520-C2CE-4A94-88FB-B8747911ED39.png
5、绘制圆弧
// MARK: 绘制圆弧
func drawArc(rect: CGRect,context:CGContext) -> Void {
// 设置绘制的颜色
UIColor.red.set()
// 设置宽度
context.setLineWidth(5)
/**
绘制圆弧
@center : 圆弧的中心点。
@radius : 圆弧的半径。
@startAngle : 圆弧开始的角度。
@endAngle : 圆弧结束的角度。
@clockwise: 绘制圆弧的方向。true为顺时针，false为逆时针。
// 例子
context.addArc(center: CGPoint.init(x: rect.size.width * 0.5, y: rect.size.height * 0.5), radius: 80, startAngle: 0, endAngle: .pi * 2, clockwise: true)
*/
// 移动起始点
context.move(to: CGPoint.init(x: 100, y: 19))
/**
有两个切点和半径绘制圆弧
@tangent1End : 切点一。
@tangent2End : 切点二。
@radius : 圆弧的半径。
*/
context.addArc(tangent1End: CGPoint.init(x: 100, y: 200), tangent2End: CGPoint.init(x: 200, y: 100), radius: 80)
// 闭合路径
context.strokePath()
}
效果图如下：
7DF988D6-4C69-4BD6-A849-44678DB42DF0.png
BF7AABAD-503E-4E2D-8859-37223F7EDFE3.png
6、路径绘制的填充
// MARK: 路径绘制的填充
func drawFillPath(rect: CGRect,context:CGContext) -> Void {
// 设置绘制的颜色
UIColor.red.set()
// 设置宽度
context.setLineWidth(5)
// 绘制四边形
context.addRect(CGRect.init(x: 50, y: 50, width: 150, height: 100))
/**
填充路径
CGPathFillRule 的参数有两个：
@.evenOdd
@.winding
*/
context.fillPath(using: .winding)
context.strokePath()
}
7、裁剪绘制区域为可绘制的区域
// MARK: 裁剪绘制区域为可绘制的区域
func drawClip(rect: CGRect,context:CGContext) -> Void {
// 设置绘制的颜色
UIColor.red.set()
// 设置宽度
context.setLineWidth(5)
// 设置裁剪后可绘制的区域
context.clip(to: CGRect.init(x: 40, y: 40, width: 60, height: 60))
/**
裁剪绘制的图形
1、裁剪所有的区域为可绘制区域。
context.clip()
2、多区域裁剪
context.clip(to: [CGRect.init(x: 40, y: 40, width: 30, height: 30),CGRect.init(x: 100, y: 40, width: 100, height: 100),CGRect.init(x: 40, y: 120, width: 40, height: 40)])
3、单区域裁剪
context.clip(to: CGRect.init(x: 40, y: 40, width: 60, height: 60))
*/
context.addRect(CGRect.init(x: 50, y: 50, width: 150, height: 100))
context.strokePath()
}
效果如下：
57E01384-8C93-4103-A1B7-8B0BE0DEB06F.png
B94F12EB-3158-44B0-8F3F-8EC18B565105.png
8、设置填充区域
// MARK: 设置填充区域
func drawFill(rect: CGRect,context:CGContext) -> Void {
// 设置绘制的颜色
UIColor.red.set()
// 设置宽度
context.setLineWidth(5)
// 绘制四边形
context.addRect(CGRect.init(x: 50, y: 50, width: 150, height: 100))
/**
区域填充
1、指定单区域的填充
context.fill(CGRect.init(x: 40, y: 40, width: 30, height: 30))
2、多区域的填充
context.fill([CGRect.init(x: 40, y: 40, width: 30, height: 30),CGRect.init(x: 100, y: 40, width: 100, height: 100),CGRect.init(x: 40, y: 120, width: 40, height: 40)])
*/
context.fill([CGRect.init(x: 40, y: 40, width: 30, height: 30),CGRect.init(x: 100, y: 40, width: 100, height: 100),CGRect.init(x: 40, y: 120, width: 40, height: 40)])
// 闭合路径绘制图形
context.strokePath()
}
效果如图：
EF159CD3-D8B9-43E4-A8E1-08356FF144A9.png
9、绘制两点之间的连线
// MARK:绘制两点之间的连线
func drawStrokeLineSegments(rect: CGRect,context:CGContext) -> Void {
// 设置绘制的颜色
UIColor.red.set()
// 设置宽度
context.setLineWidth(5)
/**
绘制两点之间的线段
@between: 是要绘制点的数组集合。
注意: 如果 between 里面的点的个数是偶数，那就是每两点之间的连线。如果为奇数，在最后一个点将和（0，0）点组成一组的连线。
*/
context.strokeLineSegments(between: [CGPoint.init(x: 10, y: 20),CGPoint.init(x: 20, y: 70),CGPoint.init(x: 100, y: 120),CGPoint.init(x: 220, y: 70)])
// 闭合路径
context.strokePath()
}
效果如下图所示：
0DB5D06E-033B-42B8-9B9E-DCC5D477E3FE.png
10、图像的绘制
// MARK:图像的绘制
func drawImage(rect: CGRect,context:CGContext) -> Void {
// 设置绘制的颜色
UIColor.red.set()
// 设置宽度
context.setLineWidth(5)
/**
图像的绘制
@image : 是要绘制的图像是一个CGImage对象。
@in : 绘制图像的大小区域。
注意：图像绘制出来是倒立的。
*/
context.draw((UIImage.init(named: "2.jpg")?.cgImage!)!, in:CGRect.init(x: 50, y: 10, width: 200, height: 180))
// 闭合路径的绘制
context.strokePath()
}
效果如下图所示
ED199368-ED32-4AE2-8A00-4CF827A34295.png
11、 绘制椭圆
// MARK: 绘制椭圆
func drawEllipse(rect: CGRect,context:CGContext) {
// 设置绘制的颜色
UIColor.red.set()
// 设置宽度
context.setLineWidth(5)
context.addEllipse(in: rect)
context.strokePath()
}
效果如下图：
00485C5F-1252-48CE-9AD5-F2C7398990DE.png
CGContext的一些其他知识点
// MARK: CGContext 的一些参数的介绍
func introduceContext(context:CGContext) -> Void {
// 获取typeID
let typeID = CGContext.typeID
print(typeID)
// 存储上下文，便于恢复
context.saveGState()
// 恢复上下文
context.restoreGState()
// 绘制路径的缩放比例
context.scaleBy(x: 1, y: 1)
// 绘制图形的旋转 。by 的取值范围是 -1.0~1.0
context.rotate(by: 1)
// 获取当前旋转对象
let ctm = context.ctm
print(ctm)
// 更改上当前的旋转对象数据
context.concatenate(CGAffineTransform.init(rotationAngle: 0.5))
// 再获取当前旋转对象
let ctm1 = context.ctm
print(ctm1)
// 设置绘制路径的线宽
context.setLineWidth(6)
/**
设置线的头部形状
可选的参数
@ butt 和 square 基本一样，属于粗狂的端头。（矩形）
@ round 半圆形的线头
@ square
*/
context.setLineCap(.butt)
/**
设置绘制路径拐角处的形状
可以选择的参数
@ miter 切角形
@ round 圆角形
@ bevel 斜切角形
*/
context.setLineJoin(.bevel)
// 设置切角的大小
context.setMiterLimit(3)
// 清楚所有绘制的路径图形
context.closePath()
// 设置绘制图形的透明度
context.setAlpha(0.6)
// 开启新的路径，丢弃老的路径
context.beginPath()
// 绘制路径的替换，用于剪切图形
context.replacePathWithStrokedPath()
/**
判断给定的点是否在绘制图形上
@point: 给定的点
@mode: 判断点的规则
CGPathDrawingMode 路径绘制的模型
@ fill ：表示用非零绕数规则。
@ eoFill： 表示用奇偶规则
@ stroke ：表示填充。
@ fillStroke ：表示描线，填充。
@ eoFillStroke ：表示描线，不是填充。
*/
let isSave = context.pathContains(CGPoint.init(x: 101, y: 52), mode: .stroke)
print(isSave)
// 绘制四边形
context.addRect(CGRect.init(x: 100, y: 50, width: 150, height: 100))
// 切除某一区域绘制的图形
context.clear(CGRect.init(x: 120, y: 50, width: 50, height: 30))
// 设置画笔的颜色
UIColor.red.set()
context.setFillColor(UIColor.red.cgColor)
// 闭合路径
context.strokePath()
}
