UI基础 - Quartz 2D 02：绘制 | 涂鸦 | 拖动图片

绘制路径

1 - 根据坐标点（数组）绘制路径

- (void)drawRect:(CGRect)rect {

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextSetLineWidth(context, 2.0);

    // 搞几个坐标点
    NSArray *pointArray = [NSArray arrayWithObjects:@[@40,@40],
                           @[@100,@30],
                           @[@100,@200],
                           @[@50,@150],
                           @[@40,@40],nil];

    for (int i = 0; i < (int)pointArray.count -1; i++) {

        CGContextMoveToPoint(context, [[[pointArray objectAtIndex:i] firstObject] floatValue], [[[pointArray objectAtIndex:i] lastObject] floatValue]);
        CGContextAddLineToPoint(context, [[[pointArray objectAtIndex:i+1] firstObject] floatValue], [[[pointArray objectAtIndex:i+1] lastObject] floatValue]);
    }

    CGContextStrokePath(context);
}

运行效果

涂鸦

1 - 使用此方式进行涂鸦，操作频繁会造成设备卡顿

#import "QuartsView.h"
@interface QuartsView ()

@property(nonatomic,strong)NSMutableArray *lineArray;// 存放所有单个路径
@end

@implementation QuartsView

- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {

        self.lineArray = [NSMutableArray array];

        // 取消按钮
        UIButton *cancelBT = [UIButton buttonWithType:UIButtonTypeCustom];
        cancelBT.frame = CGRectMake((self.frame.size.width-120)*0.5, 510, 120, 30);
        [cancelBT setTitle:@"cancel" forState:UIControlStateNormal];
        cancelBT.layer.cornerRadius = 10;
        cancelBT.backgroundColor = [UIColor redColor];
        [self addSubview:cancelBT];
        [cancelBT addTarget:self action:@selector(makeCancel) forControlEvents:UIControlEventTouchUpInside];

    }
    return self;
}

// 撤回上次的绘图操作
-(void)makeCancel{

    [self.lineArray removeLastObject];
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
    CGContextSetLineWidth(context, 2.0);

    // 涂鸦思路
    // 首先遍历大数组 self.lineArray，获取每一条线（所有点）的小数组 ponitArray
    // 再次遍历小数组中所有的点，进行绘制
    for (int i = 0 ; i< self.lineArray.count; i ++) {

        NSMutableArray *ponitArray = [self.lineArray objectAtIndex:i];

        for (int j = 0; j < (int)ponitArray.count - 1; j++) {
            
            NSValue *firstValue  = [ponitArray objectAtIndex:j];
            NSValue *secondValue = [ponitArray objectAtIndex:j+1];

            CGPoint firstPoint  = [firstValue CGPointValue];
            CGPoint secondPoint = [secondValue CGPointValue];

            CGContextMoveToPoint(context, firstPoint.x, firstPoint.y);
            CGContextAddLineToPoint(context, secondPoint.x, secondPoint.y);
        }
    }

    CGContextStrokePath(context);
}

// 开始绘制：现在并没有拿到路径上具体的点，此时应该先用一个数组保存一条路径
// 每一次调用都应该是创建一个新的路径（新的 linePathArray），然后添加到保存所有路径的数组中（self.lineArray）
// 最后调用 setNeedsDisplay 方法，绘制路径
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

    UITouch *touch = [touches anyObject];
    CGPoint currentPoint = [touch locationInView:self];

    //linePathArray（保存了一条 line）
    NSMutableArray *linePathArray = [NSMutableArray array];
    NSValue *ponitValue = [NSValue valueWithCGPoint:currentPoint];
    [linePathArray addObject:ponitValue];
    [self.lineArray addObject:linePathArray];
    [self setNeedsDisplay];
}

// 给最新添加的那个路径添加点，所以应当找到数组中最后一个路径，然后给这个路径添加 point
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

    UITouch *touch = [touches anyObject];
    CGPoint currentPoint = [touch locationInView:self];
    NSMutableArray *lastLineArr = [self.lineArray lastObject];
    NSValue *ponitValue = [NSValue valueWithCGPoint:currentPoint];
    [lastLineArr addObject:ponitValue];
    [self setNeedsDisplay];
}

运行效果

拖动图片

// - QuartsView.h

#import <UIKit/UIKit.h>
@interface QuartsView : UIView

@property CGPoint firstTouch;// 开始时触摸点
@property CGPoint lastTouch; // 结束时触摸点
@property CGRect redrawRect; // 重绘区域

@property(nonatomic,assign) BOOL locked;// 锁定图片起始位置
@property(nonatomic,strong)UIImage *drawImage; // 拖动的图片

@end

// - QuartsView.m

#import "QuartsView.h"
@implementation QuartsView
- (void)drawRect:(CGRect)rect{

    static dispatch_once_t oneToken;
    dispatch_once(&oneToken, ^{
        self.locked = NO;
        CGPoint beginPoint = CGPointMake(100, 150);
        [_drawImage drawAtPoint:beginPoint];
    });

    if (self.locked) {
        CGFloat horizontalOffset = _drawImage.size.width/2.0;
        CGFloat verticalOffset   = _drawImage.size.height/2.0;
        CGPoint drawPoint = CGPointMake(_lastTouch.x - horizontalOffset, _lastTouch.y - verticalOffset);
        [_drawImage drawAtPoint:drawPoint];
    }

}

// 开始
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    self.locked = YES;
    UITouch *touch = [touches anyObject];
    _firstTouch = [touch locationInView:self];
    _lastTouch  = [touch locationInView:self];
    [self setNeedsDisplay];
}

// 移动
 -(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

        UITouch *touch = [touches anyObject];
     _lastTouch = [touch locationInView:self];

     CGFloat horizontalOffset = _drawImage.size.width/2.0;
     CGFloat verticalOffset = _drawImage.size.height/2.0;
     _redrawRect = CGRectUnion(_redrawRect, CGRectMake(_lastTouch.x - horizontalOffset, _lastTouch.y - verticalOffset, _drawImage.size.width, _drawImage.size.height));
     [self setNeedsDisplayInRect:_redrawRect];
}

@end

// - ViewController.m

@interface ViewController()
@property(nonatomic,strong)QuartsView *QV;
@end

- (void)viewDidLoad{
    [super viewDidLoad];

    // 画布
    self.navigationController.navigationBar.hidden = YES;
    self.QV = [[QuartsView alloc] initWithFrame:self.view.frame];
    self.QV.backgroundColor = [UIColor cyanColor];
    self.QV.drawImage = [UIImage imageNamed:@"狗子.jpeg"];
    [self.view addSubview:self.QV];
    
}

运行效果：将图片拖动到右上方