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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//: 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、下面自定义一条路径,确定几个点,然后像画笔一样连线!

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
//: 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、多条子路径也可以。

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
//: 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的基本用法,用好了将是绘制图形的又一利器。

原文地址:https://www.cnblogs.com/Free-Thinker/p/5959130.html