Swift用UIBezierPath来画圆角矩形、自定义多路径图形-白红宇

Swift用UIBezierPath来画圆角矩形、自定义多路径图形

阅读量：7230 次

发布时间：2019-06-29

本文共 3222 字，大约阅读时间需要 10 分钟。

最好的特点就是可以自定义路径，设置圆角和描边都很方便，以下为代码和效果，均在playground中实现

1、首先实现一个圆角矩形，并对此路径描边，为其绘制一个轮廓。

                            
//: Playground - noun: a place where people can play
import
UIKit
class
MyView
: 
UIView
{ 
    
override
func
drawRect
(
rect
: 
CGRect
) { 
        
var
pathRect
= 
UIEdgeInsetsInsetRect
(
self
.
bounds
, 
UIEdgeInsetsMake
(
1
, 
1
, 
1
, 
1
))
        
        
var
path
= 
UIBezierPath
(
roundedRect
: 
pathRect
, 
cornerRadius
: 
10
)
        
        
path
.
lineWidth
= 
4
        
        
UIColor
.
greenColor
().
setFill
()
        
UIColor
.
blackColor
().
setStroke
()
        
path
.
fill
()
        
path
.
stroke
()
    
}
}
let
viewRect
= 
CGRect
(
x
: 
0
, 
y
: 
0
, 
width
: 
100
, 
height
: 
100
)
let
myEmptyView
= 
MyView
(
frame
:
viewRect
)
         
       

tips：所有绘制操作都是按照调用顺序进行的。在本段代码中，我在填充矩形后再对其进行描边。如果交换对path.fill()和path.stroke()的调用顺序，将会得到一个稍有不同的结果，绿色填充将会略微覆盖黑色描边，效果图如下。

2、下面自定义一条路径，确定几个点，然后像画笔一样连线！

                            
//: Playground - noun: a place where people can play
import
UIKit
class
MyView
: 
UIView
{ 
    
override
func
drawRect
(
rect
: 
CGRect
) { 
        
var
bezierPath
= 
UIBezierPath
()
        
//创建一个矩形，它的所有边都内缩5%
        
var
drawingRect
= 
CGRectInset
(
self
.
bounds
, 
self
.
bounds
.
size
.
width
*
0.05
, 
self
.
bounds
.
size
.
height
*
0.05
)
        
        
//确定组成绘画的点
        
var
topLeft
= 
CGPointMake
(
CGRectGetMinX
(
drawingRect
), 
CGRectGetMinY
(
drawingRect
))
        
var
topRight
= 
CGPointMake
(
CGRectGetMaxX
(
drawingRect
), 
CGRectGetMinY
(
drawingRect
))
        
var
bottomLeft
= 
CGPointMake
(
CGRectGetMinX
(
drawingRect
), 
CGRectGetMaxY
(
drawingRect
))
        
var
bottomRight
= 
CGPointMake
(
CGRectGetMaxX
(
drawingRect
), 
CGRectGetMaxY
(
drawingRect
))
        
var
center
= 
CGPointMake
(
CGRectGetMidX
(
drawingRect
), 
CGRectGetMinY
(
drawingRect
))
        
        
//开始绘制
        
bezierPath
.
moveToPoint
(
topLeft
)
        
bezierPath
.
addLineToPoint
(
topRight
)
        
bezierPath
.
addLineToPoint
(
bottomLeft
)
        
bezierPath
.
addCurveToPoint
(
bottomRight
, 
controlPoint1
: 
center
, 
controlPoint2
: 
center
)
        
        
//使路径闭合，结束绘制
        
bezierPath
.
closePath
()
        
        
//设定颜色，并绘制它们
        
UIColor
.
redColor
().
setFill
()
        
UIColor
.
blackColor
().
setStroke
()
        
        
bezierPath
.
fill
()
        
bezierPath
.
stroke
()
    
}
}
let
viewRect
= 
CGRect
(
x
: 
0
, 
y
: 
0
, 
width
: 
100
, 
height
: 
100
)
let
myEmptyView
= 
MyView
(
frame
:
viewRect
)
         
       

3、多条子路径也可以。

                            
//: Playground - noun: a place where people can play
import
UIKit
class
MyView
: 
UIView
{ 
    
override
func
drawRect
(
rect
: 
CGRect
) { 
        
//创建一条空Bezier路径
        
let
bezierPath
= 
UIBezierPath
()
        
        
//为两个组成部分定义矩形
        
let
squareRect
= 
CGRectInset
(
rect
, 
rect
.
size
.
width
*
0.45
, 
rect
.
size
.
height
*
0.05
)
        
        
let
circleRect
= 
CGRectInset
(
rect
, 
rect
.
size
.
width
*
0.3
, 
rect
.
size
.
height
*
0.3
)
        
        
let
cornerRadius
: 
CGFloat
= 
20
        
        
//创建路径
        
let
circlePath
= 
UIBezierPath
(
ovalInRect
: 
circleRect
)
        
let
squarePath
= 
UIBezierPath
(
roundedRect
: 
squareRect
, 
cornerRadius
: 
cornerRadius
)
        
        
//将它们添加到主路径
        
squarePath
.
appendPath
(
circlePath
)
        
bezierPath
.
appendPath
(
squarePath
)
        
        
//设定颜色并绘制它们
        
UIColor
.
redColor
().
setFill
()
        
        
//绘制路径
        
bezierPath
.
fill
()
    
}
}
let
viewRect
= 
CGRect
(
x
: 
0
, 
y
: 
0
, 
width
: 
100
, 
height
: 
100
)
let
myEmptyView
= 
MyView
(
frame
:
viewRect
)
         
       

以上就是UIBezierPath的基本用法，用好了将是绘制图形的又一利器。

转载地址：http://slpfm.baihongyu.com/

你可能感兴趣的文章