UIView绘图之UIBezierPath

《ios编程实战》第15章  UIView绘图

绘制路径：

-(void)drawPath{    UIBezierPath *path = [UIBezierPath bezierPath];    [path moveToPoint:CGPointMake(100, 0)];    [path addLineToPoint:CGPointMake(0, 100)];    [path addLineToPoint:CGPointMake(100, 100)];    [path setLineWidth:5];//设置线宽       [path stroke];    [self setNeedsDisplay];}

绘制封闭路径：

-(void)drawClosePath{    UIBezierPath *path = [UIBezierPath bezierPath];    [path moveToPoint:CGPointMake(100, 150)];    [path addLineToPoint:CGPointMake(0, 250)];    [path addLineToPoint:CGPointMake(100, 250)];    [path setLineWidth:3];    [[UIColor redColor]setStroke];//设置画笔颜色        [path setLineJoinStyle:kCGLineJoinRound];//边角成圆形，使用线宽的一半做半径    [path closePath];    [path stroke];    [self setNeedsDisplay];}

绘制封闭路径并填充：

-(void)fillClosePath{    UIBezierPath *path = [UIBezierPath bezierPath];    [path moveToPoint:CGPointMake(250, 150)];    [path addLineToPoint:CGPointMake(150, 250)];    [path addLineToPoint:CGPointMake(250, 250)];    //[[UIColor redColor]setFill];//使用颜色填充    [[UIColor colorWithPatternImage:[UIImage imageNamed:@"fifth"]]setFill];//使用图片填充    [path closePath];    [path fill];    [self setNeedsDisplay];}

绘制虚线路径：

-(void)drawDashPath{    CGFloat pattern[] = {10,10};    UIBezierPath * path = [UIBezierPath bezierPath];    path.lineWidth = 6;    [path setLineDash:pattern count:2 phase:0];    [path moveToPoint:CGPointMake(250, 0)];    [path addLineToPoint:CGPointMake(150, 110)];    [path addLineToPoint:CGPointMake(3200, 110)];    [[UIColor redColor]setStroke];    [path stroke];    [self setNeedsDisplay];}

效果如下：

绘制弧线：

//定义角度转弧度宏#define DEGREES_TO_RADIANS(degrees) ((M_PI * degrees)/180)

-(void)drawHalfCircle{    UIBezierPath *path = [UIBezierPath bezierPath];    path.lineCapStyle = kCGLineCapRound;//线头圆状    path.lineWidth = 5;    [path addArcWithCenter:CGPointMake(170, 70) radius:50 startAngle:0 endAngle:DEGREES_TO_RADIANS(180) clockwise:YES];    [path moveToPoint:CGPointMake(320, 70)];//此句一定要加上，不然第二个弧的起点会从第一个弧起点开始    [path addArcWithCenter:CGPointMake(270, 70) radius:50 startAngle:0 endAngle:DEGREES_TO_RADIANS(180) clockwise:NO];    [path stroke];    [self setNeedsDisplay];}

效果如下：

转换并绘制路径：

-(void)drawSymbol{    UIBezierPath *path = [UIBezierPath bezierPath];    [path addArcWithCenter:CGPointMake(50, 70) radius:50 startAngle:0 endAngle:DEGREES_TO_RADIANS(270) clockwise:NO];    [path addArcWithCenter:CGPointMake(50, 70) radius:50 startAngle:DEGREES_TO_RADIANS(90) endAngle:DEGREES_TO_RADIANS(180) clockwise:YES];            void(^drawBlock)(int x,int y)=^(int x,int y){        CGAffineTransform trans = CGAffineTransformMakeTranslation(x, y);//生成位移矩阵对象(原点发生变化，而非圆心变化)        CGAffineTransform revert = CGAffineTransformInvert(trans);//矩阵的反矩阵，即原位        [path applyTransform:trans];        [path fill];//绘制路径        [path applyTransform:revert];    };        for(int i=0;i<3;i++){        for (int j =0;j<4;j++){            drawBlock(i*110,j*110);        }    }    [self setNeedsDisplay];}

效果如下：

绘制路径并旋转：

-(void)drawRotate{    UIBezierPath * path = [UIBezierPath bezierPath];    [path moveToPoint:CGPointMake(250, 0)];    [path addLineToPoint:CGPointMake(250, 50)];    [path addLineToPoint:CGPointMake(300, 50)];    [path closePath];;    [path moveToPoint:CGPointMake(250, 50)];    [path addLineToPoint:CGPointMake(300, 0)];//旋转前        CGAffineTransform rotateForm = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(45));    [path applyTransform:rotateForm];//旋转后（路径圆心围绕原点旋转）        [path stroke];}

效果说明：

如果想在原位旋转怎么弄呢？

答案是先位移，再旋转，最后归位。（如果细究起来，这里应该应用到矩阵转换的数学原理）

CGAffineTransform rotateForm = CGAffineTransformMakeTranslation(275, 25);//原点移到圆心处    rotateForm = CGAffineTransformRotate(rotateForm, DEGREES_TO_RADIANS(45));//旋转45度    rotateForm = CGAffineTransformTranslate(rotateForm, -275, -25);//原点归位    [path applyTransform:rotateForm];    [path stroke];

绘制贝塞尔曲线：

贝塞尔曲线定义及详解可以找百度，重点说下贝塞尔曲线分二阶和三阶。

二阶贝塞尔是由两个端点A、B和一个控制点C，按固定多项式方程生成的。

如下三条蓝黑红二阶贝塞尔曲线：

代码如下：

int i =0;-(void)drawBezier2{           void (^ drawBeziers)(int) = ^(int x){         UIBezierPath * path = [UIBezierPath bezierPath];        i++;        if(i == 1){            [[UIColor blueColor]setStroke];            [[UIColor blueColor]setFill];        } else if(i  == 2){            [[UIColor blackColor]setStroke];            [[UIColor blackColor]setFill];        } else if(i == 3){            [[UIColor redColor]setStroke];            [[UIColor redColor]setFill];        }        [path addArcWithCenter:CGPointMake(x, 150) radius:3 startAngle:0 endAngle:2*M_PI clockwise:YES];        [path fill];                [path moveToPoint:CGPointMake(20, 300)];        [path addQuadCurveToPoint:CGPointMake(300, 300) controlPoint:CGPointMake(x, 150)];        [path stroke];    };    drawBeziers(40);    drawBeziers(160);    drawBeziers(280);    [self setNeedsDisplay];}

三阶贝塞尔是由两个端点A、B和两个控制点C1、C2，按固定多项式方程生成的。

如下三阶贝塞尔曲线：

代码如下：

-(void)drawBezier3{    void (^ drawBeziers)(int) = ^(int x){        UIBezierPath * path = [UIBezierPath bezierPath];        [path addArcWithCenter:CGPointMake(x, 150) radius:3 startAngle:0 endAngle:2*M_PI clockwise:YES];                [path moveToPoint:CGPointMake(300-x, 450)];        [path addArcWithCenter:CGPointMake(300-x, 450) radius:3 startAngle:0 endAngle:2*M_PI clockwise:YES];        [path fill];                [path moveToPoint:CGPointMake(20, 300)];        //[path addQuadCurveToPoint:CGPointMake(300, 300) controlPoint:CGPointMake(x, 150)];        [path addCurveToPoint:CGPointMake(300, 300)  controlPoint1:CGPointMake(x, 150) controlPoint2:CGPointMake(300-x, 450)];        [path stroke];    };    drawBeziers(80);    [self setNeedsDisplay];}

绘图就记录到这里，下一章就是动画的学习了。