iOS 图片编辑——涂鸦

iOS 专栏收录该内容
121 篇文章 0 订阅

iOS图片编辑前面我们讲了

图片的缩放 旋转: http://blog.csdn.net/lwjok2007/article/details/50845510

滤镜:http://blog.csdn.net/lwjok2007/article/details/50853878

接下来我们要讲图片的涂鸦,我们分开一点一点拓展,先给图片上划线

创建项目 起名testAddLine





接下来我们在默认生成的ViewController中添加一张图片 待用

同时添加一个按钮 

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    UIImageView *imageV = [[UIImageView alloc]initWithFrame:CGRectMake(10, 120, screen_Width-20, screen_Height-150)];
    imageV.image = [UIImage imageNamed:@"640-960-1.jpg"];
    [self.view addSubview:imageV];
    
    UIButton *testBtn = [[UIButton alloc]initWithFrame:CGRectMake(screen_Width/2.0-60, 60, 120, 36)];
    [testBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [testBtn setTitle:@"添加直线" forState:UIControlStateNormal];
    [testBtn addTarget:self action:@selector(addLineAct:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:testBtn];
}

- (void)addLineAct:(id)sender{
    NSLog(@"测试按钮");
}

接下来我们创建一个UIView 用来添加直线 起名:DrawLine


创建几个变量

@property(nonatomic,strong) NSMutableArray * completeLines; //已经画好的线条 存入数组
@property(nonatomic,strong) NSMutableDictionary* LinesInProscess; //正在画的线条 存入字典
@property(nonatomic,strong) UIColor *lineColor;//线条颜色
@property (nonatomic)float lineWidth;//线条的粗细


初始化DrawLine
//初始化
- (id)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        //初始化变量
        _completeLines = [[NSMutableArray alloc]init];
        _LinesInProscess = [[NSMutableDictionary alloc]init];
        //设置透明背景
        self.backgroundColor = [UIColor clearColor];
        
    }
    
    return  self;
}

我们把线条单独抽象出来 创建一个类 创建对象 起名 Line


线条 两个属性 起始点 结束点(这就是数学中的两点确定一条直线) 

给Line 类创建两个属性

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface Line : NSObject

@property(nonatomic)CGPoint begin; //线条开始点

@property(nonatomic)CGPoint end; //线条结束点

@end

接下来 我们重写DrawLine 的  drawRect 方法  绘制线条

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
    
    //获取上下文
    CGContextRef cgt=UIGraphicsGetCurrentContext();
    //设置线条宽度
    CGContextSetLineWidth(cgt, self.lineWidth);
    //设置线条两端形状为圆角
    CGContextSetLineCap(cgt, kCGLineCapRound);
    
    //设置颜色
    [self.lineColor set];
    //绘制已经完成的线段
    for (Line *line in _completeLines){
        CGContextMoveToPoint(cgt, [line begin].x, [line begin].y);
        CGContextAddLineToPoint(cgt, [line end].x, [line end].y );
        CGContextStrokePath(cgt);
    }
    
    
    //绘制正在画的线段
    for (NSArray *v in _LinesInProscess) {
        Line *line =[_LinesInProscess objectForKey:v];
        CGContextMoveToPoint(cgt, [line begin].x, [line begin].y);
        CGContextAddLineToPoint(cgt, [line end].x, [line end].y );
        CGContextStrokePath(cgt);
    }
    
}


实现几个手指滑动方法 用来接受手指的位置画线

//清空画板
-(void)clearAll
{
    [_completeLines removeLastObject];
    [_LinesInProscess removeAllObjects];
    [self setNeedsDisplay];
}


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //判断是否连按
    for (UITouch *t in touches) {
        if ([t tapCount]>1) {
            //第二次画线时第一条线还未完成时结束画线
            [self clearAll];
            return;
        }
        
        //NSValue 作为键使用
        NSValue *key=[NSValue valueWithNonretainedObject:t];
        
        // 根据触摸位置创建Line对象
        CGPoint loc=[t locationInView:self];
        Line *newLine=[[Line alloc]init ];
        newLine.begin=loc;
        newLine.end=loc;
        //将当前正在画的线存入字典
        [_LinesInProscess setObject:newLine forKey:key];
        
    }
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    //手指移动过程中按照当前手指的位置动态更新线条
    for (UITouch * t in touches) {
        NSValue *key=[NSValue valueWithNonretainedObject:t];
        // 找对象当前UITouch对象的Line对象
        Line *line =[_LinesInProscess objectForKey:key];
        
        CGPoint loc=[t locationInView:self];
        line.end=loc;
    }
    [self setNeedsDisplay];
}

-(void)endTouches:(NSSet *) touches
{
    //画线完成之后将当前线条加入_completeLines 数组中 同时删除字典_LinesInProscess里的线条
    for (UITouch *t in touches) {
        NSValue *key=[NSValue valueWithNonretainedObject:t];
        Line *line =[_LinesInProscess objectForKey:key];
        if (line) {
            [_completeLines addObject:line];
            [_LinesInProscess removeObjectForKey:key];
        }
    }
    [self setNeedsDisplay];
}

-(void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self endTouches:touches];
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self endTouches:touches];
}


回到 ViewController中 给按钮点击事件中 添加DrawLine到ImageView上

- (void)addLineAct:(id)sender{
    NSLog(@"测试按钮");
    
    DrawLine *touchdrawView = [[DrawLine alloc]initWithFrame:imageV.frame];

    touchdrawView.lineColor = [UIColor yellowColor];
    touchdrawView.lineWidth = 5.0;
    touchdrawView.tag = 902;
    [self.view addSubview:touchdrawView];
    
    
}

好了 运行程序试试

点击 添加直线 按钮之后 试试在图片上画线


好了 添加线段就先讲到这里  源代码 我会上传到群空间   

大家有兴趣可以去下载

下节我们将给线段末尾加上一个箭头:http://blog.csdn.net/lwjok2007/article/details/50885376

demo:【60312图片上画线AddLine.zip】

苹果开发群 :414319235  欢迎加入,共同学习

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值