iOS开发核心动画之Quartz2D绘图

一. Quartz2D的绘制不同图形

1. 绘图步骤

1> 自定义一个View

2> 在- (void)drawrectangle方法中进行绘图

获取当前上下文

CGContextRef ref = UIGraphicsGetCurrentContext();

绘制路径

UIBezierPath *path = [UIBezierPath bezierPath];

保存路径到上下文种

CGContextAddPath(ref, path.CGPath);

将上下文中的内容渲染到view的layer上(描边:stroke 填充:fill)

CGContextStrokePath(ref);

2. 绘制直线

- (void)drawreLine
{
 // 1.获取上下文
 CGContextRef ref = UIGraphicsGetCurrentContext();
 
 // 2.绘制路径
 UIBezierPath *path = [UIBezierPath bezierPath];
 
 // 2.1 设置起点
 [path moveToPoint:CGPointMake(20, 250)];
 // 2.2 设置线的终点
 [path addLineToPoint:CGPointMake(100, 50)];
 
 // 3.保存路径到上下文中
 CGContextAddPath(ref, path.CGPath);
 
 // 4.将上下文中的内容渲染到view上
 CGContextStrokePath(ref);
}

3. 绘制矩形框

- (void)drawrectangle
{
 // 1.获取上下文
 CGContextRef ref = UIGraphicsGetCurrentContext();
 
 // 2.绘制路径
 UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 50, 60)];
 
 // 3.保存路径到上下文
 CGContextAddPath(ref, path.CGPath);
 
 [[UIColor redColor] set];
 
 // 4.上下文渲染到view上
 CGContextStrokePath(ref);
}

4. 绘制圆

- (void)drawCirle
{
 UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 50, 40) cornerRadius:20];
 
 [path stroke];
}

5. 绘制圆弧

- (void)drawRect:(CGRect)rect {
 
 CGPoint center = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5);
 CGFloat radius = self.bounds.size.width * 0.5 - 10;
 CGFloat startAngle = -M_PI_2;
 CGFloat endAngle = startAngle + self.progress * M_PI * 2;
 
 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
 
 
 [path stroke];
}

6. 绘制饼型

- (void)drawRect:(CGRect)rect {
 
 NSArray *dataArray = @[@25, @25, @50];
 
 CGPoint center = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5);
 CGFloat radius = self.bounds.size.width * 0.5 - 10;
 CGFloat startA = 0;
 CGFloat angle = 0;
 CGFloat endA = 0;
 
 for (NSNumber *num in dataArray) {
        startA = endA;
        angle = num.intValue / 100.0 * M_PI * 2;
        endA = startA + angle;
 
 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
 
 [[self randomColor] set];
 
 [path addLineToPoint:center];
 
 [path fill];
 }
}
// 随机颜色
- (UIColor *)randomColor
{
 CGFloat R = arc4random_uniform(256) / 255.0;
 CGFloat G = arc4random_uniform(256) / 255.0;
 CGFloat B = arc4random_uniform(256) / 255.0;
 return [UIColor colorWithRed:R green:G blue:B alpha:1];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
 // 重绘
 [self setNeedsDisplay];
}

二. Quartz2D的一些基本属性

1. 绘文字

- (void)drawRect:(CGRect)rect {
 // Drawing code
 
 //画文字,无论有没有看到上下文,只要是绘制东西到View上,就必须得要在drawRect方法当中进行.
 NSString *str = @"adsfasffasdfasdfasdfa";
 //withAttributes,设文字的属性.,文字大小,颜色,阴影,描边.x
 
 NSMutableDictionary *dict = [NSMutableDictionary dictionary];
 //key,value,
    dict[NSFontAttributeName] = [UIFont systemFontOfSize:50];
    dict[NSForegroundColorAttributeName] = [UIColor redColor];
 
 //设置阴影
 NSShadow *shdow = [[NSShadow alloc] init];
    shdow.shadowOffset = CGSizeMake(10, -10);
    shdow.shadowColor = [UIColor greenColor];
    shdow.shadowBlurRadius = 3;
    dict[NSShadowAttributeName] = shdow;
 
 
 //设置描边
    dict[NSStrokeWidthAttributeName] = @2;
 //设置描边颜色
    dict[NSStrokeColorAttributeName] = [UIColor blueColor];
 //drawAtPoint:不会自动换行
 //drawInRect:会自动换行.
 //画文字
 [str drawAtPoint:CGPointZero withAttributes:dict];
 [str drawInRect:rect withAttributes:dict];
 
}

2. 绘图片

- (void)drawRect:(CGRect)rect {
 // Drawing code
 
 //画图片.
 //加载图片
 UIImage *image = [UIImage imageNamed:@"001"];
 //绘制图片是原图片的尺寸大小.
//    [image drawAtPoint:CGPointZero];
 //把整张图片填充到rect这个区域当中.
//    [image drawInRect:rect];
 
 
//    //平铺
////    [image drawAsPatternInRect:rect];
//    //裁剪,超过裁剪区域的内容,都会被裁剪掉.,设置裁剪区域,必须得要在绘制图片之前.
//    UIRectClip(CGRectMake(0, 0, 50, 50));
//    
//    [image drawAtPoint:CGPointZero];
 
 
 //快速的填充一个矩形.
 UIRectFill(CGRectMake(0, 100, 100, 100));
}

3. 雪花(定时器)

- (void)awakeFromNib
{
 // 添加定时器
 CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateImageY)];
 
 [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
}
- (void)updateImageY
{
    _imageY += 10;
 
 if (_imageY > self.bounds.size.height) {
        _imageY = 0;
 }
 
 [self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect {
 
 // 1.加载图片
 UIImage *image = [UIImage imageNamed:@"雪花"];
 
 
 [image drawAtPoint:CGPointMake(0, _imageY)];
}

4. 水印

// 1.水印
- (void)watermark
{
 // 0.加载图片
 UIImage *image = [UIImage imageNamed:@"小黄人"];
 // 1.开启位图上下文
 UIGraphicsBeginImageContext(image.size);
 // 2.绘制图片
 [image drawAtPoint:CGPointZero];
 // 3.绘制文字
 NSString *str = @"小码哥";
 NSMutableDictionary *dictM = [NSMutableDictionary dictionary];
    dictM[NSFontAttributeName] = [UIFont systemFontOfSize:50];
    dictM[NSForegroundColorAttributeName] = [UIColor redColor];
 [str drawAtPoint:CGPointZero withAttributes:dictM];
 // 4.生成新的图片
    image = UIGraphicsGetImageFromCurrentImageContext();
 // 5.销毁位图上下文
 UIGraphicsEndImageContext();
 
    self.watermarkImageView.image = image;
}

5. 截取圆形图片

// 2.截取圆形图片
- (void)circle
{
 // 0.加载图片
 UIImage *image = [UIImage imageNamed:@"阿狸头像"];
 // 1.开启位图上下文
 UIGraphicsBeginImageContext(image.size);
 // 2.设置裁剪区域
 UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
 [path addClip];
 // 3.绘制图片
 [image drawAtPoint:CGPointZero];
 // 4.生成新的图片
    image = UIGraphicsGetImageFromCurrentImageContext();
 
 UIGraphicsEndImageContext();
    self.circleImageView.image = image;
}

6.截取带有边框的圆形图片

// 3.截取有边框的圆形图片
- (void)borderCircle
{
 // 截取带有边框的圆形图片
 CGFloat border = 10;
 
 // 0.加载图片
 UIImage *image = [UIImage imageNamed:@"阿狸头像"];
 
 // 1.开启位图上下文
 CGSize bitmapSize = CGSizeMake(image.size.width + border * 2, image.size.height + border * 2);
 UIGraphicsBeginImageContext(bitmapSize);
 
 // 2.绘制大的圆形
 UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, bitmapSize.width, bitmapSize.height)];
 [[UIColor redColor] set];
 
 [path fill];
 
 // 3.设置小圆裁剪区域
    path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(border, border, image.size.width, image.size.height)];
 
 [path addClip];
 
 // 4.绘制图片
 [image drawAtPoint:CGPointMake(border, border)];
 
 // 5.生成新的图片
    image = UIGraphicsGetImageFromCurrentImageContext();
 
 // 6.关闭位图上下文
 UIGraphicsEndImageContext();
 
    self.circleImageView.image = image;
}

7. 截屏

// 截屏
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
 // 1.开启位图上下文
 UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0);
 
 // 2.获取位图上下文
 CGContextRef crf = UIGraphicsGetCurrentContext();
 
 // 3.将屏幕view的layer渲染到路径中
 [self.view.layer renderInContext:crf];
 
 // 4.获取位图上下文中的内容
 UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
 
 // 5.关闭位图上下文
 UIGraphicsEndImageContext();
 
 NSData *data = UIImagePNGRepresentation(image);
 
 [data writeToFile:@"/Users/admin/Desktop/image.png" atomically:YES];
}

8. 移动鼠标确定截取屏幕的大小

1> 定义一个手势

- (void)pan:(UIPanGestureRecognizer *)pan
{
 CGPoint curP = [pan locationInView:self.huoyingImageView];
 
 if (pan.state == UIGestureRecognizerStateBegan) { // 开始拖动
        self.startP = curP;
 } else if (pan.state == UIGestureRecognizerStateChanged) { // 拖动中
 CGFloat coverVX = self.startP.x;
 CGFloat coverVY = self.startP.y;
 CGFloat coverVW = curP.x - self.startP.x;
 CGFloat coverVH = curP.y - self.startP.y;
 CGRect frame = CGRectMake(coverVX, coverVY, coverVW, coverVH);
        self.coverV.frame = frame;
 } else if (pan.state == UIGestureRecognizerStateEnded) { // 结束拖动
 // 1.开启位图上下文
 UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0);
 
 // 2.设置裁剪区域
 UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.coverV.frame];
 [path addClip];
 
 // 3.获取当前位图上下文
 CGContextRef ref = UIGraphicsGetCurrentContext();
 
 // 4.将图片的layer渲染到上下文
 [self.huoyingImageView.layer renderInContext:ref];
 
 // 5.生成一张新的图片并赋值给huoyingImageView
        self.huoyingImageView.image = UIGraphicsGetImageFromCurrentImageContext();
 
 // 6.关闭位图上下文
 UIGraphicsEndImageContext();
 
 // 7.移除遮盖
 [self.coverV removeFromSuperview];
 
 }
}

2> 设置遮盖View

#pragma mark - View懒加载
- (UIView *)coverV
{
 if (!_coverV) {
 UIView *coverV = [[UIView alloc] init];
        coverV.backgroundColor = [UIColor blackColor];
        coverV.alpha = 0.7;
 [self.view addSubview:coverV];
        self.coverV = coverV;
 }
 return _coverV;
}

9. 撕图效果

设置清除区域 CGContextClearRect(ref, rect);

- (void)pan:(UIPanGestureRecognizer *)pan
{
 CGPoint curP = [pan locationInView:self.imageView];
 
 // 1.开启位图上下文
 UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, NO, 0);
 
 // 2.获取当前位图上下文
 CGContextRef ref = UIGraphicsGetCurrentContext();
 
 // 3.将图片渲染到位图上下文种
 [self.imageView.layer renderInContext:ref];
 
 // 4.设置清除区域
 CGFloat WH = 30;
 CGFloat X = curP.x - WH * 0.5;
 CGFloat Y = curP.y - WH * 0.5;
 CGRect rect = CGRectMake(X, Y, WH, WH);
 CGContextClearRect(ref, rect);
 
 // 5.获取位图上下文种的图片并赋值给imageView
    self.imageView.image = UIGraphicsGetImageFromCurrentImageContext();
 
 // 6.关闭位图上下文
 UIGraphicsEndImageContext();
 
}

posted @ 2015-11-27 12:51 文刂Rn 阅读(389) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

文刂Rn(从点滴做起)

iOS开发核心动画之Quartz2D绘图

公告