码迷,mamicode.com
首页 > 其他好文 > 详细

UIBezierPath精讲

时间:2016-09-08 20:05:04      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:

参考:http://www.jianshu.com/p/734b34e82135

 

基础知识

使用UIBezierPath可以创建基于矢量的路径,此类是Core Graphics框架关于路径的封装。使用此类可以定义简单的形状,如椭圆、矩形或者有多个直线和曲线段组成的形状等。

UIBezierPathCGPathRef数据类型的封装。如果是基于矢量形状的路径,都用直线和曲线去创建。我们使用直线段去创建矩形和多边形,使用曲线去创建圆弧(arc)、圆或者其他复杂的曲线形状。

使用UIBezierPath画图步骤:

  1. 创建一个UIBezierPath对象
  2. 调用-moveToPoint:设置初始线段的起点
  3. 添加线或者曲线去定义一个或者多个子路径
  4. 改变UIBezierPath对象跟绘图相关的属性。如,我们可以设置画笔的属性、填充样式等

UIBezierPath创建方法介绍

我们先看看UIBezierPath类提供了哪些创建方式,这些都是工厂方法,直接使用即可。

+ (instancetype)bezierPath;
+ (instancetype)bezierPathWithRect:(CGRect)rect;
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
                            cornerRadius:(CGFloat)cornerRadius;
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
                        byRoundingCorners:(UIRectCorner)corners 
                              cornerRadii:(CGSize)cornerRadii;
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center 
                                 radius:(CGFloat)radius 
                             startAngle:(CGFloat)startAngle 
                               endAngle:(CGFloat)endAngle 
                              clockwise:(BOOL)clockwise;
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

下面我们一个一个地介绍其用途。

+ (instancetype)bezierPath;

这个使用比较多,因为这个工厂方法创建的对象,我们可以根据我们的需要任意定制样式,可以画任何我们想画的图形。

+ (instancetype)bezierPathWithRect:(CGRect)rect;

这个工厂方法根据一个矩形画贝塞尔曲线。

+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

这个工厂方法根据一个矩形画内切曲线。通常用它来画圆或者椭圆。

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
                            cornerRadius:(CGFloat)cornerRadius;
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
                        byRoundingCorners:(UIRectCorner)corners 
                              cornerRadii:(CGSize)cornerRadii;

第一个工厂方法是画矩形,但是这个矩形是可以画圆角的。第一个参数是矩形,第二个参数是圆角大小。
第二个工厂方法功能是一样的,但是可以指定某一个角画成圆角。像这种我们就可以很容易地给UIView扩展添加圆角的方法了。

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center 
                                 radius:(CGFloat)radius 
                             startAngle:(CGFloat)startAngle 
                               endAngle:(CGFloat)endAngle 
                              clockwise:(BOOL)clockwise;

这个工厂方法用于画弧,参数说明如下:
center: 弧线中心点的坐标
radius: 弧线所在圆的半径
startAngle: 弧线开始的角度值
endAngle: 弧线结束的角度值
clockwise: 是否顺时针画弧线

温馨提示:我们下面的代码都是在自定义的BezierPathView类中的- (void)drawRect:(CGRect)rect方法中调用

画三角形

先看效果图

技术分享

    override func drawRect(rect: CGRect) {
 
        //  画三角形
        let path = UIBezierPath()
        
        path.moveToPoint(CGPointMake(40, 80))
        path.addLineToPoint(CGPointMake(100, 180))
        path.addLineToPoint(CGPointMake(160, 80))
        
        path.closePath()
        
        path.lineWidth = 5.0
        
        UIColor.redColor().setStroke()
        path.stroke()
        
        UIColor.brownColor().setFill()
        path.fill()  
    }  

画矩形

先看效果图

技术分享

    override func drawRect(rect: CGRect) {
 
     // 画矩形
        let path = UIBezierPath(rect: CGRectMake(40, 80, 100, 120))
        
        path.lineWidth = 5.0
        path.lineJoinStyle = .Round    //设置两条线连结点的样式
        path.lineCapStyle = .Square    //设置线条拐角帽的样式
        
        UIColor.blueColor().setStroke()
        path.stroke()
        
        UIColor.purpleColor().setFill()
        path.fill()
  }  

 

UIBezierPath精讲

标签:

原文地址:http://www.cnblogs.com/muzijie/p/5852183.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!