1，绘制矩形
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
import
UIKit
class
ViewController
:
UIViewController
{
override
func
viewDidLoad() {
super
.viewDidLoad()
let
frame =
CGRect
(x: 30, y: 30, width: 250, height: 100)
let
cgView =
CGView
(frame: frame)
self
.view.addSubview(cgView)
}
override
func
didReceiveMemoryWarning() {
super
.didReceiveMemoryWarning()
}
}
class
CGView
:
UIView
{
override
init
(frame:
CGRect
) {
super
.
init
(frame: frame)
//设置背景色为透明，否则是黑色背景
self
.backgroundColor =
UIColor
.clear
}
required
init
?(coder aDecoder:
NSCoder
) {
fatalError(
"init(coder:) has not been implemented"
)
}
override
func
draw(_ rect:
CGRect
) {
super
.draw(rect)
//获取绘图上下文
guard
let
context =
UIGraphicsGetCurrentContext
()
else
{
return
}
//创建一个矩形，它的所有边都内缩3点
let
drawingRect =
self
.bounds.insetBy(dx: 3, dy: 3)
//创建并设置路径
let
path =
CGMutablePath
()
//绘制矩形
path.addRect(drawingRect)
//添加路径到图形上下文
context.addPath(path)
//设置笔触颜色
context.setStrokeColor(
UIColor
.orange.cgColor)
//设置笔触宽度
context.setLineWidth(6)
//设置填充颜色
context.setFillColor(
UIColor
.blue.cgColor)
//绘制路径并填充
context.drawPath(using: .fillStroke)
}
}
|
2，绘制圆角矩形
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
class
CGView
:
UIView
{
override
init
(frame:
CGRect
) {
super
.
init
(frame: frame)
//设置背景色为透明，否则是黑色背景
self
.backgroundColor =
UIColor
.clear
}
required
init
?(coder aDecoder:
NSCoder
) {
fatalError(
"init(coder:) has not been implemented"
)
}
override
func
draw(_ rect:
CGRect
) {
super
.draw(rect)
//获取绘图上下文
guard
let
context =
UIGraphicsGetCurrentContext
()
else
{
return
}
//创建一个矩形，它的所有边都内缩3点
let
drawingRect =
self
.bounds.insetBy(dx: 3, dy: 3)
//创建并设置路径
let
path =
CGMutablePath
()
//绘制矩形
path.addRoundedRect(
in
: drawingRect, cornerWidth: 10, cornerHeight: 10)
//添加路径到图形上下文
context.addPath(path)
//设置笔触颜色
context.setStrokeColor(
UIColor
.orange.cgColor)
//设置笔触宽度
context.setLineWidth(6)
//设置填充颜色
context.setFillColor(
UIColor
.blue.cgColor)
//绘制路径并填充
context.drawPath(using: .fillStroke)
}
}
|
3，绘制圆形
绘制正圆和绘制椭圆都是使用 addEllipse() 方法。如果宽高都一样就是正圆形。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
class
CGView
:
UIView
{
override
init
(frame:
CGRect
) {
super
.
init
(frame: frame)
//设置背景色为透明，否则是黑色背景
self
.backgroundColor =
UIColor
.clear
}
required
init
?(coder aDecoder:
NSCoder
) {
fatalError(
"init(coder:) has not been implemented"
)
}
override
func
draw(_ rect:
CGRect
) {
super
.draw(rect)
//获取绘图上下文
guard
let
context =
UIGraphicsGetCurrentContext
()
else
{
return
}
//创建并设置路径
let
path =
CGMutablePath
()
//绘制正圆
let
minWidth =
min
(
self
.bounds.width,
self
.bounds.height)
path.addEllipse(
in
:
CGRect
(x: 3, y: 3, width: minWidth-6, height: minWidth-6))
//添加路径到图形上下文
context.addPath(path)
//设置笔触颜色
context.setStrokeColor(
UIColor
.orange.cgColor)
//设置笔触宽度
context.setLineWidth(6)
//设置填充颜色
context.setFillColor(
UIColor
.blue.cgColor)
//绘制路径并填充
context.drawPath(using: .fillStroke)
}
}
|
4，绘制椭圆
绘制正圆和绘制椭圆都是使用 addEllipse() 方法。如果宽高不一样就是椭圆形。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
class
CGView
:
UIView
{
override
init
(frame:
CGRect
) {
super
.
init
(frame: frame)
//设置背景色为透明，否则是黑色背景
self
.backgroundColor =
UIColor
.clear
}
required
init
?(coder aDecoder:
NSCoder
) {
fatalError(
"init(coder:) has not been implemented"
)
}
override
func
draw(_ rect:
CGRect
) {
super
.draw(rect)
//获取绘图上下文
guard
let
context =
UIGraphicsGetCurrentContext
()
else
{
return
}
//创建一个矩形，它的所有边都内缩3点
let
drawingRect =
self
.bounds.insetBy(dx: 3, dy: 3)
//创建并设置路径
let
path =
CGMutablePath
()
//绘制椭圆
path.addEllipse(
in
: drawingRect)
//添加路径到图形上下文
context.addPath(path)
//设置笔触颜色
context.setStrokeColor(
UIColor
.orange.cgColor)
//设置笔触宽度
context.setLineWidth(6)
//设置填充颜色
context.setFillColor(
UIColor
.blue.cgColor)
//绘制路径并填充
context.drawPath(using: .fillStroke)
}
}
|
5，复杂图形的绘制
应用中有时会需要绘制一些不规则的图形。我们可以通过多段路径链接，或者多条子路径组合的形式来实现。具体参考我原来写的两篇文章：
6，设置阴影
给图形设置阴影同给线条添加阴影方法是一样的，这里就不再说明了。具体参考前面文章： Swift - Core Graphics绘图框架详解1（绘制线条）转载自：http://www.hangge.com/blog/cache/detail_1438.html