zoukankan      html  css  js  c++  java
  • UIBezierPath(转)

    视图可以通过子视图、图层或实现drawRect:方法来表现内容,如果说实现了drawRect:方法,那么最好就不要混用其他方法了,如图层和子视图。自定义绘图大部分是由UIKit或者Core Graphics来实现的。现在我们来讲讲UIBezierPath和Core Graphics。

    1.UIBezierPath

    UIKit中的UIBezierPath是Core Graphics框架关于path的一个封装。可以创建基于矢量的路径,例如椭圆或者矩形,或者有多个直线和曲线段组成的形状。

    1.绘制矩形

    绘制矩形最简单的办法是使用UIRectFrame和UIRectFill,如下

    - (void)drawRect:(CGRect)rect
    {
    [[UIColor redColor]setFill];
    UIRectFill(CGRectMake(20, 20, 100, 50));
    }

    其中UIColor setFill是设置画笔颜色。

    通过使用UIBezierPath可以自定义绘制线条的粗细,是否圆角等。

    - (void)drawRect:(CGRect)rect
    {
    UIColor *color = [UIColor colorWithRed:0 green:0 blue:0.7 alpha:1];
    [color set]; //设置线条颜色
    UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 50)];
    aPath.lineWidth = 8.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    [aPath stroke];
    }

    效果如下:


    2.圆和椭圆

    只有将上面代码中的:

    UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 50)];

    替代为以下代码即可绘制一个圆形

    UIBezierPath* aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 100, 100)];

    椭圆:

    UIBezierPath* aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 100, 50)];

    3.多边形

    多边形是一些简单的形状,这些形状是由一些直线线条组成,我们可以用moveToPoint: 和 addLineToPoint:方法去构建。moveToPoint:设置我们想要创建形状的起点。从这点开始,我们可以用方法addLineToPoint:去创建一个形状的线段。
    我们可以连续的创建line,每一个line的起点都是先前的终点,终点就是指定的点。
    closePath可以在最后一个点和第一个点之间画一条线段。

    - (void)drawRect:(CGRect)rect
    {
    UIColor *color = [UIColor colorWithRed:0 green:0.7 blue:0 alpha:1];
    [color set];
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound;
    aPath.lineJoinStyle = kCGLineCapRound;
    // 起点
    [aPath moveToPoint:CGPointMake(100.0, 0.0)];
    // 绘制线条
    [aPath addLineToPoint:CGPointMake(200.0, 40.0)];
    [aPath addLineToPoint:CGPointMake(160, 140)];
    [aPath addLineToPoint:CGPointMake(40.0, 140)];
    [aPath addLineToPoint:CGPointMake(0.0, 40.0)];
    [aPath closePath];//第五条线通过调用closePath方法得到的
    //根据坐标点连线
    [aPath stroke];
    [aPath fill];
    }

    效果如下:


    4.不规则形状

    想画弧线组成的不规则形状,我们需要使用中心点、弧度和半径,如下图。弧度使用顺时针脚底,0弧度指向右边,pi/2指向下方,pi指向左边,-pi/2指向上方。然后使用bezierPathWithArcCenter: radius: startAngle endAngle: clockwise:方法来绘制。


    1).绘制一段弧度

    - (void)drawRect:(CGRect)rect
    {
    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色
    UIBezierPath* aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(80, 80)
    radius:75
    startAngle:0
    endAngle:DEGREES_TO_RADIANS(135)
    clockwise:YES];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    [aPath stroke];
    }

    结果如下:


    2).两种贝塞尔曲线

    a).第一种:

    - (void)drawRect:(CGRect)rect
    {
    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    [aPath moveToPoint:CGPointMake(20, 100)];
    [aPath addQuadCurveToPoint:CGPointMake(120, 100) controlPoint:CGPointMake(70, 0)];
    [aPath stroke];
    }

    效果如下:


    b).第二种:

    - (void)drawRect:(CGRect)rect
    {
    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    [aPath moveToPoint:CGPointMake(5, 80)];
    [aPath addCurveToPoint:CGPointMake(155, 80) controlPoint1:CGPointMake(80, 0) controlPoint2:CGPointMake(110, 100)];
    [aPath stroke];
    }

    3).曲线组合:

    下面我们来画一朵花:

    - (void)drawRect:(CGRect)rect {
    CGSize size = self.bounds.size;
    CGFloat margin = 10;
    //rintf:四舍五入函数
    CGFloat radius = rintf(MIN(size.height - margin, size.width - margin) / 4);
    CGFloat xOffset, yOffset;
    CGFloat offset = rintf((size.height - size.width) / 2);
    if (offset > 0) {
    xOffset = (CGFloat)rint(margin / 2);
    yOffset = offset;
    } else {
    xOffset = -offset;
    yOffset = rintf(margin / 2);
    }
    [[UIColor redColor] setFill];
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path addArcWithCenter:CGPointMake(radius * 2 + xOffset, radius + yOffset)
    radius:radius
    startAngle:(CGFloat)-M_PI
    endAngle:0
    clockwise:YES];
    [path addArcWithCenter:CGPointMake(radius * 3 + xOffset, radius * 2 + yOffset)
    radius:radius
    startAngle:(CGFloat)-M_PI_2
    endAngle:(CGFloat)M_PI_2
    clockwise:YES];
    [path addArcWithCenter:CGPointMake(radius * 2 + xOffset, radius * 3 + yOffset)
    radius:radius
    startAngle:0
    endAngle:(CGFloat)M_PI
    clockwise:YES];
    [path addArcWithCenter:CGPointMake(radius + xOffset, radius * 2 + yOffset)
    radius:radius
    startAngle:(CGFloat)M_PI_2
    endAngle:(CGFloat)-M_PI_2
    clockwise:YES];
    [path closePath];
    [path fill];
    }
    
    

    记得调用以下这个方法,使其view变化后(例如横屏了)重新调用drawRect:

    - (void)awakeFromNib 
    {
    // Comment this line to see default behavior
    self.contentMode = UIViewContentModeRedraw;
    }
  • 相关阅读:
    对于es6新增的async 和 await的使用和理解
    如何实现文本的竖向排版 && js 打印指定区域
    鼠标透过蒙版点击触发下一层事件,上一层点击事件失效
    小程序的弊端以及Taro优点
    服务器端渲染和客户端渲染区别
    使用mobx 示例
    C语言
    C语言
    C语言
    [转]linux tar 解压命令总结
  • 原文地址:https://www.cnblogs.com/fuunnyy/p/5776516.html
Copyright © 2011-2022 走看看