随笔- 3538 文章- 1 评论- 67 阅读- 398万

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

最好的特点就是可以自定义路径，设置圆角和描边都很方便，以下为代码和效果，均在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)