• iOS开发核心动画之Quartz2D绘图

    一. Quartz2D的绘制不同图形

    1. 绘图步骤

    1> 自定义一个View

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

    • 获取当前上下文

    1. CGContextRef ref = UIGraphicsGetCurrentContext();
    • 绘制路径
    1. UIBezierPath *path = [UIBezierPath bezierPath];
    • 保存路径到上下文种
    1. CGContextAddPath(ref, path.CGPath);
    • 将上下文中的内容渲染到view的layer上(描边:stroke 填充:fill)
    1. CGContextStrokePath(ref);

    2. 绘制直线

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

    3. 绘制矩形框

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


    4. 绘制圆

    1. - (void)drawCirle
    2. {
    3.  UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 50, 40) cornerRadius:20];
    4.  
    5.  [path stroke];
    6. }

    5. 绘制圆弧

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


    6. 绘制饼型

    1. - (void)drawRect:(CGRect)rect {
    2.  
    3.  NSArray *dataArray = @[@25, @25, @50];
    4.  
    5.  CGPoint center = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5);
    6.  CGFloat radius = self.bounds.size.width * 0.5 - 10;
    7.  CGFloat startA = 0;
    8.  CGFloat angle = 0;
    9.  CGFloat endA = 0;
    10.  
    11.  for (NSNumber *num in dataArray) {
    12.         startA = endA;
    13.         angle = num.intValue / 100.0 * M_PI * 2;
    14.         endA = startA + angle;
    15.  
    16.  UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    17.  
    18.  [[self randomColor] set];
    19.  
    20.  [path addLineToPoint:center];
    21.  
    22.  [path fill];
    23.  }
    24. }
    26. // 随机颜色
    27. - (UIColor *)randomColor
    28. {
    29.  CGFloat R = arc4random_uniform(256) / 255.0;
    30.  CGFloat G = arc4random_uniform(256) / 255.0;
    31.  CGFloat B = arc4random_uniform(256) / 255.0;
    32.  return [UIColor colorWithRed:R green:G blue:B alpha:1];
    33. }
    35. - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
    36. {
    37.  // 重绘
    38.  [self setNeedsDisplay];
    39. }

    二. Quartz2D的一些基本属性

    1. 绘文字

    1. - (void)drawRect:(CGRect)rect {
    2.  // Drawing code
    3.  
    4.  //画文字,无论有没有看到上下文,只要是绘制东西到View上,就必须得要在drawRect方法当中进行.
    5.  NSString *str = @"adsfasffasdfasdfasdfa";
    6.  //withAttributes,设文字的属性.,文字大小,颜色,阴影,描边.x
    7.  
    8.  NSMutableDictionary *dict = [NSMutableDictionary dictionary];
    9.  //key,value,
    10.     dict[NSFontAttributeName] = [UIFont systemFontOfSize:50];
    11.     dict[NSForegroundColorAttributeName] = [UIColor redColor];
    12.  
    13.  //设置阴影
    14.  NSShadow *shdow = [[NSShadow alloc] init];
    15.     shdow.shadowOffset = CGSizeMake(10, -10);
    16.     shdow.shadowColor = [UIColor greenColor];
    17.     shdow.shadowBlurRadius = 3;
    18.     dict[NSShadowAttributeName] = shdow;
    19.  
    20.  
    21.  //设置描边
    22.     dict[NSStrokeWidthAttributeName] = @2;
    23.  //设置描边颜色
    24.     dict[NSStrokeColorAttributeName] = [UIColor blueColor];
    26.  //drawAtPoint:不会自动换行
    27.  //drawInRect:会自动换行.
    29.  //画文字
    30.  [str drawAtPoint:CGPointZero withAttributes:dict];
    31.  [str drawInRect:rect withAttributes:dict];
    33.  
    34. }

    2. 绘图片

    1. - (void)drawRect:(CGRect)rect {
    2.  // Drawing code
    3.  
    4.  //画图片.
    5.  //加载图片
    6.  UIImage *image = [UIImage imageNamed:@"001"];
    7.  //绘制图片是原图片的尺寸大小.
    8. //    [image drawAtPoint:CGPointZero];
    9.  //把整张图片填充到rect这个区域当中.
    10. //    [image drawInRect:rect];
    11.  
    12.  
    13. //    //平铺
    14. ////    [image drawAsPatternInRect:rect];
    15. //    //裁剪,超过裁剪区域的内容,都会被裁剪掉.,设置裁剪区域,必须得要在绘制图片之前.
    16. //    UIRectClip(CGRectMake(0, 0, 50, 50));
    17. //    
    18. //    [image drawAtPoint:CGPointZero];
    19.  
    20.  
    21.  //快速的填充一个矩形.
    22.  UIRectFill(CGRectMake(0, 100, 100, 100));
    23. }

    3. 雪花(定时器)

    1. - (void)awakeFromNib
    2. {
    3.  // 添加定时器
    4.  CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateImageY)];
    5.  
    6.  [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
    7. }
    9. - (void)updateImageY
    10. {
    11.     _imageY += 10;
    12.  
    13.  if (_imageY > self.bounds.size.height) {
    14.         _imageY = 0;
    15.  }
    16.  
    17.  [self setNeedsDisplay];
    18. }
    20. - (void)drawRect:(CGRect)rect {
    21.  
    22.  // 1.加载图片
    23.  UIImage *image = [UIImage imageNamed:@"雪花"];
    24.  
    25.  
    26.  [image drawAtPoint:CGPointMake(0, _imageY)];
    27. }


    4. 水印

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

    5. 截取圆形图片

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

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

    1. // 3.截取有边框的圆形图片
    2. - (void)borderCircle
    3. {
    4.  // 截取带有边框的圆形图片
    5.  CGFloat border = 10;
    6.  
    7.  // 0.加载图片
    8.  UIImage *image = [UIImage imageNamed:@"阿狸头像"];
    9.  
    10.  // 1.开启位图上下文
    11.  CGSize bitmapSize = CGSizeMake(image.size.width + border * 2, image.size.height + border * 2);
    12.  UIGraphicsBeginImageContext(bitmapSize);
    13.  
    14.  // 2.绘制大的圆形
    15.  UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, bitmapSize.width, bitmapSize.height)];
    16.  [[UIColor redColor] set];
    17.  
    18.  [path fill];
    19.  
    20.  // 3.设置小圆裁剪区域
    21.     path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(border, border, image.size.width, image.size.height)];
    22.  
    23.  [path addClip];
    24.  
    25.  // 4.绘制图片
    26.  [image drawAtPoint:CGPointMake(border, border)];
    27.  
    28.  // 5.生成新的图片
    29.     image = UIGraphicsGetImageFromCurrentImageContext();
    30.  
    31.  // 6.关闭位图上下文
    32.  UIGraphicsEndImageContext();
    33.  
    34.     self.circleImageView.image = image;
    35. }

    7. 截屏

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

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

    1> 定义一个手势

    1. - (void)pan:(UIPanGestureRecognizer *)pan
    2. {
    3.  CGPoint curP = [pan locationInView:self.huoyingImageView];
    4.  
    5.  if (pan.state == UIGestureRecognizerStateBegan) { // 开始拖动
    6.         self.startP = curP;
    7.  } else if (pan.state == UIGestureRecognizerStateChanged) { // 拖动中
    8.  CGFloat coverVX = self.startP.x;
    9.  CGFloat coverVY = self.startP.y;
    10.  CGFloat coverVW = curP.x - self.startP.x;
    11.  CGFloat coverVH = curP.y - self.startP.y;
    12.  CGRect frame = CGRectMake(coverVX, coverVY, coverVW, coverVH);
    13.         self.coverV.frame = frame;
    14.  } else if (pan.state == UIGestureRecognizerStateEnded) { // 结束拖动
    15.  // 1.开启位图上下文
    16.  UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0);
    17.  
    18.  // 2.设置裁剪区域
    19.  UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.coverV.frame];
    20.  [path addClip];
    21.  
    22.  // 3.获取当前位图上下文
    23.  CGContextRef ref = UIGraphicsGetCurrentContext();
    24.  
    25.  // 4.将图片的layer渲染到上下文
    26.  [self.huoyingImageView.layer renderInContext:ref];
    27.  
    28.  // 5.生成一张新的图片并赋值给huoyingImageView
    29.         self.huoyingImageView.image = UIGraphicsGetImageFromCurrentImageContext();
    30.  
    31.  // 6.关闭位图上下文
    32.  UIGraphicsEndImageContext();
    33.  
    34.  // 7.移除遮盖
    35.  [self.coverV removeFromSuperview];
    36.  
    37.  }
    38. }

    2> 设置遮盖View

    1. #pragma mark - View懒加载
    2. - (UIView *)coverV
    3. {
    4.  if (!_coverV) {
    5.  UIView *coverV = [[UIView alloc] init];
    6.         coverV.backgroundColor = [UIColor blackColor];
    7.         coverV.alpha = 0.7;
    8.  [self.view addSubview:coverV];
    9.         self.coverV = coverV;
    10.  }
    11.  return _coverV;
    12. }


    9. 撕图效果

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

    1. - (void)pan:(UIPanGestureRecognizer *)pan
    2. {
    3.  CGPoint curP = [pan locationInView:self.imageView];
    4.  
    5.  // 1.开启位图上下文
    6.  UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, NO, 0);
    7.  
    8.  // 2.获取当前位图上下文
    9.  CGContextRef ref = UIGraphicsGetCurrentContext();
    10.  
    11.  // 3.将图片渲染到位图上下文种
    12.  [self.imageView.layer renderInContext:ref];
    13.  
    14.  // 4.设置清除区域
    15.  CGFloat WH = 30;
    16.  CGFloat X = curP.x - WH * 0.5;
    17.  CGFloat Y = curP.y - WH * 0.5;
    18.  CGRect rect = CGRectMake(X, Y, WH, WH);
    19.  CGContextClearRect(ref, rect);
    20.  
    21.  // 5.获取位图上下文种的图片并赋值给imageView
    22.     self.imageView.image = UIGraphicsGetImageFromCurrentImageContext();
    23.  
    24.  // 6.关闭位图上下文
    25.  UIGraphicsEndImageContext();
    26.  
    27. }
  • 相关阅读:
    level trigger 与 edge trigger 的区别
    使用ifstream时碰到的一个小问题
    转一篇 sed one line
    select(poll)效率，与异步网络IO，AIO, libevent, epoll
    类的成员函数指针的使用
    awk 的OFS使用 小 tips
    一句话打通所有机器，小脚本
    usleep sleep函数会重置clock 的返回值
    qstore 的 chunk重构小记
    判断质数的方法
  • 原文地址：https://www.cnblogs.com/Xfsrn/p/5000340.html
Copyright © 2020-2023  润新知