UI基础 - Quartz 2D 1.1

Quartz 2D

1 - 绘图需要两个库

① 一个是 Quartz 2D，它是 Core Graphics 框架的一部分

② 另一个库就是 OpenGL ES，它是跨平台图形库 OpenGL 的一个子集

2 - Quartz 2D 是在图形上下文中进行的：每个视图都有关联的上下文，一个上下文表示一个绘制目标

上下文定义了基本的绘制属性，如颜色、建材区域、线条宽度和样式信息、字体信息、混合模式等

3 - 获取上下文的常见方式

① Quartz 提供的创建函数

② Mac OS X 框架

③ iOS 的 UIKit 框架提供的函数

4 - Quartz 2D提供了许多函数，大大简化了复杂形状的创建：如绘制多边形、椭圆等等直接调用相应函数即可

① 它是一组函数、数据类型以及对象，专门用于直接在内存中对视图或图像进行绘制

② 它将正在绘制的图像作为一个 canvas ，每一个绘图操作都降作用于画布，并且处于之前所有绘图操作之上

③ 它提供了各种线条、形状以及图像绘制函数，仅仅限于绘制二维图形

5 - 代码示例

① 绘制直线，并利用系统函数绘制椭圆、矩形

② 实现图片拖动

// - QuartsView.h

 1 #import 
 2 // 枚举:绘制形状
 3 typedef enum {
 4 
 5     kLineShape,// 直线
 6     kRectShape,// 矩形
 7     kEllipseShape,// 椭圆
 8     kImageShape
 9 }ShapeType;
10 
11 @interface QuartsView : UIView
12 
13 @property ShapeType shapeType;// 形状
14 
15 @property CGPoint firstTouch;// 开始时触摸点
16 @property CGPoint lastTouch; // 结束时触摸点
17 @property CGRect redrawRect;
18 
19 @property(nonatomic,strong)UIColor *currentColor;
20 @property(nonatomic,strong)UIImage *drawImage;
21 
22 @end

// - QuartsView.m

  1 #import "QuartsView.h"
  2 @implementation QuartsView
  3 
  4 -(void)drawRect:(CGRect)rect{
  5 
  6     // 获取上下文
  7     CGContextRef context = UIGraphicsGetCurrentContext();
  8     // 画笔宽度 5 像素
  9     CGContextSetLineWidth(context, 5);
 10     // 填充颜色
 11     CGContextSetFillColorWithColor(context, _currentColor.CGColor);
 12     // 画笔颜色：默认黑色
 13     CGContextSetStrokeColorWithColor(context, _currentColor.CGColor);
 14 
 15     switch (_shapeType) {
 16 
 17             // 直线
 18         case kLineShape:
 19             // 画笔指定位置
 20             CGContextMoveToPoint(context, _firstTouch.x, _firstTouch.y);
 21             // 画笔结束位置
 22             CGContextAddLineToPoint(context, _lastTouch.x, _lastTouch.y);
 23             // 绘图可见
 24             CGContextStrokePath(context);
 25             break;
 26 
 27             // 矩形
 28         case kRectShape:
 29 
 30             CGContextAddRect(context,[self currentRect]);
 31             CGContextDrawPath(context, kCGPathFillStroke);
 32             break;
 33 
 34             // 椭圆
 35         case kEllipseShape:
 36             CGContextAddEllipseInRect(context,[self currentRect]);
 37             CGContextDrawPath(context, kCGPathFillStroke);
 38             break;
 39 
 40         case kImageShape:{
 41 
 42             // 以图片中心点为基准
 43             CGFloat horizontalOffset = _drawImage.size.width/2.0;
 44             CGFloat verticalOffset   = _drawImage.size.height/2.0;
 45             CGPoint drawPoint = CGPointMake(_lastTouch.x - horizontalOffset, _lastTouch.y - verticalOffset);
 46             [_drawImage drawAtPoint:drawPoint];
 47             break;
 48         }
 49         default:
 50             break;
 51     }
 52 }
 53 
 54 // 获取当前坐标
 55 -(CGRect)currentRect{
 56     return CGRectMake(_firstTouch.x, _firstTouch.y, _lastTouch.x - _firstTouch.x, _lastTouch.y - _firstTouch.y);
 57 }
 58 
 59 // 开始触摸
 60 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
 61 
 62     UITouch *touch = [touches anyObject];
 63     _firstTouch = [touch locationInView:self];
 64     _lastTouch = [touch locationInView:self];
 65     
 66     // 重绘：它会导致整个视图被擦除并重新绘制，即便是微小的整改
 67     [self setNeedsDisplay];
 68 }
 69 
 70 // 移动
 71 -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
 72 
 73     UITouch *touch =  [touches anyObject];
 74     _lastTouch = [touch locationInView:self];
 75 
 76     if (_shapeType == kImageShape) {
 77         
 78         CGFloat horizontalOffset = _drawImage.size.width/2.0;
 79         CGFloat verticalOffset   = _drawImage.size.height/2.0;
 80         
 81         // CGRectUnion：两个 CGRect 的合集
 82         _redrawRect = CGRectUnion(_redrawRect, CGRectMake(_lastTouch.x - horizontalOffset, _lastTouch.y - verticalOffset, _drawImage.size.width, _drawImage.size.height));
 83         [self setNeedsDisplayInRect:_redrawRect];
 84     }else{
 85 
 86         _redrawRect = CGRectUnion(_redrawRect,[self currentRect]);
 87         [self setNeedsDisplayInRect:_redrawRect];
 88     }
 89 }
 90 
 91 // 结束触摸
 92 -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
 93 
 94     UITouch *touch = [touches anyObject];
 95     _lastTouch = [touch locationInView:self];
 96 
 97     if (_shapeType == kImageShape) {
 98         CGFloat horizontalOffset = _drawImage.size.width/2.0;
 99         CGFloat verticalOffset = _drawImage.size.height/2.0;
100         _redrawRect = CGRectUnion(_redrawRect, CGRectMake(_lastTouch.x - horizontalOffset, _lastTouch.y - verticalOffset, _drawImage.size.width, _drawImage.size.height));
101         [self setNeedsDisplayInRect:_redrawRect];
102 
103     }else{
104         _redrawRect = CGRectUnion(_redrawRect, [self currentRect]);
105         _redrawRect = CGRectInset(_redrawRect, -5.0, -5.0);
106         [self setNeedsDisplayInRect:_redrawRect];
107     }
108 }
109 
110 @end

// - ViewController.m

 1 #import "ViewController.h"
 2 #import "QuartsView.h"
 3 @implementation ViewController
 4 
 5 - (void)viewDidLoad {
 6     [super viewDidLoad];
 7     
 8     // 画布
 9     QuartsView *quaView = [[QuartsView alloc] initWithFrame:self.view.bounds];
10     quaView.backgroundColor = [UIColor whiteColor];
11     quaView.currentColor = [UIColor brownColor];// 填充颜色
12     quaView.drawImage = [UIImage imageNamed:@"timg.jpeg"];// 图片
13 
14     //quaView.shapeType = kEllipseShape;// 椭圆
15     //quaView.shapeType = kRectShape;   // 矩形
16     //quaView.shapeType = kLineShape;   // 直线
17 
18     quaView.shapeType = kImageShape;// 图片（拖动）
19     [self.view addSubview:quaView];
20 }
21 
22 @end

运行效果：直线 | 椭圆 | 矩形

素材链接

https://pan.baidu.com/s/1QayffyTPnnsZsw28D4ZjUA

ca2p

UI基础

UI基础 - Quartz 2D 1.1

相关

标签