iOS开发-Quartz2D的基本使用(二)

通过 <iOS开发-Quartz2D的基本使用(一)> 我们能够利用Quartz2D绘制直线和曲线,并制作了一个简单的画板功能 但是真正的开发过程当中这些是远远不够的,那么我们就接着上部分内容更深层次的学习Quartz2D

矩形

//第一种
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 200, 200)];
    [path fill]; // fill就是填充
//第二种
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 200, 200)];
    [path stroke]; // stroke是渲染(描边)

fill
stroke

我们很明显的看出以上两种效果是截然不一样的.

椭圆

椭圆的绘制方式和上面的矩形的绘制方法类似
事例代码:

    //前两个参数表示的是需要绘制的图形在父视图上的位置
    //后两个参数表示的是需要绘制的图形在父视图上的大小
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 200, 200, 100)];
    [[UIColor purpleColor]set];
    path.lineWidth = 5;
    [path fill];
  
    UIBezierPath *pat = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 200, 100)];
    [[UIColor redColor]set];
    pat.lineWidth = 5;
    [pat stroke];

效果:

椭圆

圆角

-(void)yuanJiao{
    
    //第一个参数是CGRect参数 第二个参数是圆角度
    //[UIBezierPath bezierPathWithRoundedRect:<#(CGRect)#> cornerRadius:<#(CGFloat)#>]
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 200, 200) cornerRadius:100];
    [[UIColor greenColor]set];
    path.lineWidth = 5;

    [path stroke];
    
    UIBezierPath *path1 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 300, 200, 200) cornerRadius:100];
    [[UIColor magentaColor]set];
    path.lineWidth = 5;
    [path1 fill];
}

程序运行结果

圆角

柱状图

实例代码

-(void)zhuZhuangTu{
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    //横线(横轴)
    [path moveToPoint:CGPointMake(0, 300)];//起点
    [path addLineToPoint:CGPointMake(300, 300)];//终点
    
    //纵线(纵轴)
    [path moveToPoint:CGPointMake(0, 300)];
    [path addLineToPoint:CGPointMake(0, 0)];
    
    path.lineWidth = 5;
    [[UIColor redColor]set];
    [path stroke];
    
    
    int lines = 0;
    NSArray *dataArray = @[@100,@200,@290,@80,@70,@30,@40,@50];
    for (NSNumber *num in dataArray) {
        
        //柱状图的最低点
        CGPoint startPoint = CGPointMake(20 + lines * 300 / dataArray.count, 300);
        
        CGPoint endPoint = CGPointMake(20 + lines * 300 / dataArray.count, 300 - 300 * ([num intValue] / 300.0));
        UIBezierPath *path = [UIBezierPath bezierPath];
        [path moveToPoint:startPoint];
        [path addLineToPoint:endPoint];
        [UIColor greenColor];
        path.lineWidth = 20;
        [path stroke];
        lines++ ;
    }
}

柱状图

饼状图

-(void)bingZhuangTu{
    NSMutableArray *dataArray = [NSMutableArray array];
    for (int i = 0; i <= 100; i++) {
        [dataArray addObject:@1];//分成100份 这个根据个人情况细分
    }
    CGFloat start = 0;
    CGFloat end = 0;
    
    for (NSNumber *num in dataArray) {
        
        //计算角度
        end = num.floatValue / 100 * M_PI * 2; //总共360度
        
        //参数依次是 圆心 半径 起始角度 结束角度
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:start endAngle:start + end clockwise:YES];
        //关闭路径
        [path addLineToPoint:CGPointMake(150, 150)];
        [path closePath];
        
        
        [[UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1] set];//随机色
        [path fill];//设置填充
        start += end;
    }
    
}

饼状图

我们在模拟一种等分的效果,把圆分成等比例的四分, 上面代码也即是等价于下面内容 下面是对上面的一个分解执行

-(void)yuan{
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];
    [path addLineToPoint:CGPointMake(150, 150)];
    [path closePath];
    [path stroke];
    
    UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:M_PI_2 endAngle:M_PI_2 + M_PI_2 clockwise:YES];
    
    [[UIColor redColor] set];
    [path2 addLineToPoint:CGPointMake(150, 150)];
    
    [path2 closePath];
    
    [path2 stroke];
    
    UIBezierPath *path3 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:M_PI endAngle:M_PI + M_PI_2 clockwise:YES];
    [path3 addLineToPoint:CGPointMake(150, 150)];
    [[UIColor blueColor] set];
    
    [path3 closePath];
    
    [path3 stroke];
    
    UIBezierPath *path4 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:M_PI + M_PI_2 endAngle:0 clockwise:YES];
    
    [path4 addLineToPoint:CGPointMake(150, 150)];
    [[UIColor blackColor] set];
    
    [path4 closePath];
    [path4 stroke];
}

程序运行效果如下:

我们把stroke改为fill就变为了填充的样式,再次不在演示.

图片剪切

我们接下来研究一下如何对图片进行剪切我们在viewDidLoad:方法里

    //拥有一张图片
    UIImage *image =[UIImage imageNamed:@"2"];
    myImageView *imageView = [[myImageView alloc]initWithImage:image];
    imageView.backgroundColor = [UIColor grayColor];
    CGRect rectFrame = CGRectMake(50, 50, 0, 0);
    rectFrame.size = image.size;
    imageView.frame = rectFrame;
    [self.view addSubview:imageView];

运行以上代码后的结果

接着我们做一下处理

    //需要剪切的范围
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
    [path addClip];
    //剪切
    [image drawAtPoint:CGPointZero];
    
    //获取剪切好的图片
    UIImage *aImage = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    
    imageView.image= aImage;

再次执行后的结果

这个时候我们可以看到,按照要求我们获得了一个剪切之后的椭圆图形.
但是我们有时候可以根据自己实际的需要来进行裁剪 我们接下来做一件事情 需求是什么呢 鼠标在键盘上画一块区域 我们对图片进行裁剪 ,获取这个区域之内的内容.
首先我们自定义一个view视图

.h
#import <UIKit/UIKit.h>
typedef void(^MyBlock)(UIBezierPath *);
@interface MYView : UIView
@property(nonatomic,copy)MyBlock block;
@end

.m
#import "MYView.h"
@interface MYView ()
@property(nonatomic,strong)NSMutableArray *pathArray;
@end


@implementation MYView

-(NSMutableArray *)pathArray{
    if (!_pathArray) {
        _pathArray=[NSMutableArray array];
    }
    return _pathArray;
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
    for (UIBezierPath *path in self.pathArray) {
        path.lineWidth = 5;
        [path stroke];
    }
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:[[touches anyObject] locationInView:self]];
    [self.pathArray addObject:path];
}
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    //获取终点 不止一个终点
    UIBezierPath *path = [self.pathArray lastObject];
    [path addLineToPoint:[[touches anyObject] locationInView:self]];
    //调用drawRect方法
    [self setNeedsDisplay];
}

-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UIBezierPath *path = [_pathArray lastObject];
    [path closePath];
    [self setNeedsDisplay];
    self.block(path);
}

视图自定义完毕之后 我们回到viewDidLoad:方法里面

- (void)viewDidLoad {
    [super viewDidLoad];
    
    __block UIImage *image = [UIImage imageNamed:@"2"];
    self.imageView = [[UIImageView alloc]initWithImage:image];
    //self.imageView.frame= self.view.frame;
    self.myView = [[MYView alloc]initWithFrame:self.imageView.frame];
    self.myView.backgroundColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0];
    [self.view addSubview:self.imageView];
    [self.view addSubview:self.myView];
    
    
    __weak typeof(self) se = self;
    
    self.myView.block = ^(UIBezierPath *p){
        //剪切
        UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
        //剪切路径
        UIBezierPath *path = p;
        [path addClip];//剪切
        
        [image drawAtPoint:CGPointZero];
        
        image = UIGraphicsGetImageFromCurrentImageContext();
        
        //结束上下文
        UIGraphicsEndImageContext();
        
        //给imageView赋值
        se.imageView.image= image;
        
    }; 
}

运行之后我们会看到:

但是当我们用鼠标划出一个区域的时候 会看到:

由此 我们就获得了自己想截取的部分~~~~~~