zoukankan      html  css  js  c++  java
  • 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的基本用法,用好了将是绘制图形的又一利器。

  • 相关阅读:
    Linux实战教学笔记16:磁盘原理
    Linux实战教学笔记15:用户管理初级(下)
    Linux实战教学笔记14:用户管理初级(上)
    Linux实战教学笔记13:定时任务补充
    Linux实战教学笔记12:linux三剑客之sed命令精讲
    Linux实战教学笔记11:linux定时任务
    Linux实战教学笔记10:正则表达式
    Linux实战教学笔记09:通配符
    Linux实战教学笔记08:Linux 文件的属性(下半部分)
    Linux实战教学笔记08:Linux 文件的属性(上半部分)
  • 原文地址:https://www.cnblogs.com/Free-Thinker/p/5959130.html
Copyright © 2011-2022 走看看