Quart2D绘图 绘制imageView的笔记

一.绘制文字

    // Drawing code

    // 文字
    NSString* str = @"传智播客iOS十九期";
  

    NSShadow* s = [[NSShadow alloc] init];//阴影
    s.shadowOffset = CGSizeZero;//偏移量的大小
    s.shadowBlurRadius = 3; // 越大 越模糊
    s.shadowColor = [UIColor purpleColor];//颜色

    // 创建一个参数的字典
    NSDictionary* attrs = @{
        NSFontAttributeName : [UIFont systemFontOfSize:30],//字体
        NSForegroundColorAttributeName : [UIColor blueColor],//颜色
        NSUnderlineStyleAttributeName : @(1),//下划线
        NSShadowAttributeName : s//阴影
    };

    // 渲染(绘制)
    // 从指定的点开始绘制
    [str drawAtPoint:CGPointZero withAttributes:attrs];
    // 绘制到指定的区域当中

    //    [str drawInRect:rect withAt

展示效果:

二. 绘制图片

- (void)drawRect:(CGRect)rect
{
    // Drawing code

    // 获取图片
    UIImage* image = [UIImage imageNamed:@"dst2"];

    // 绘制图片
   [image drawAtPoint:CGPointZero]; // 从某一个点开始绘制
 [image drawInRect:CGRectMake(0, 0, 200, 200)]; // 把图片绘制到制定的区域
 [image drawAsPatternInRect:rect]; // 在制定的区域当中平铺

}

平铺的实现效果:

03.创建模拟imageView

思路实现:

1.创建View类

2.添加image属性

3.在drawRect方法中给image进行绘制

4.重写image的构造方法进行设置frame和赋值.然后去实现

5.然后到ViewController去进行添加 (传入头文件设置属性imageView,然后进行添加到父View上)

6.然后重写image的set的方法(得赋值,重绘图像的方法)

7在ViewControl实现点击屏幕的方法,进行里面设置添加新的图片

代码如下:

#import <UIKit/UIKit.h>

@interface CZImageView : UIView
/**
 *  图片
 */
@property (nonatomic, strong) UIImage* image;
/**
 * 重写image的构造方法
 */
- (instancetype)initWithImage:(UIImage*)image;

@end

---

#import "CZimageView.h"

@implementation CZimageView


//更新视图的时候系统会自动调用这个方法
- (void)drawRect:(CGRect)rect {
   
   
    //设置绘制图片的范围
    [self.image drawInRect:rect];
}
//重写set的方法对第二张图片进行赋值
- (void)setImage:(UIImage *)image{

    _image = image;
    //重绘方法
    [self setNeedsDisplay];

}
//重写构造方法
- (instancetype)initWithImage:(UIImage *)image{
    if (self = [super initWithFrame:CGRectMake(0, 0, image.size.width, image.size.height)]) {
        _image = image;
    }
 

    return self;

}

---

#import "ViewController.h"
#import "CZimageView.h"
@interface ViewController ()
//设置View的属性
@property (nonatomic,weak)CZimageView *imageView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //添加imageView并且设置属性
    CZimageView *imagView =[[CZimageView alloc]initWithImage:[UIImage imageNamed:@"me"]];
    //添加到父View上
    [self.view addSubview:imagView];
     //赋值回去
    _imageView = imagView;
   
   
}
//点击屏幕的方法
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

    self.imageView.image =[UIImage imageNamed:@"Press"];
}

@end

实现效果:

三 裁剪上下文显示区域

代码如下:

 (void)drawRect:(CGRect)rect
{
    // Drawing code

    // 获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 画一个显示的区域
        CGContextAddArc(ctx, 150, 150, 150, 0, 2 * M_PI, 1);
//    CGContextAddRect(ctx, CGRectMake(0, 0, 150, 150));
//    CGContextAddRect(ctx, CGRectMake(150, 150, 150, 150));

    //    CGContextFillPath(ctx);

    // 裁剪上下文的显示区域
    CGContextClip(ctx);

    // 获取图片
    UIImage* image = [UIImage imageNamed:@"me"];
    // 绘制 设置一个范围
    [image drawInRect:rect];

}

实现效果:

五.测试图片类型的图行上下文并保存到沙盒

 (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{

    // UIGraphicsBeginImageContext(CGSizeMake(200, 200)); <=> UIGraphicsBeginImageContextWithOptions(CGSizeMake(200, 200), NO, 1);

    // 开启图片上下文
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(200, 200), NO, 0);

    // 获取当前的上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
     //绘制一个圆
    CGContextAddArc(ctx, 100, 100, 80, 0, 2 * M_PI, 1);

    // 渲染
    CGContextStrokePath(ctx);

    // 从图片类型的上下文当中 取出 image对象
    UIImage* image = UIGraphicsGetImageFromCurrentImageContext();

    // 关闭
    UIGraphicsEndImageContext();

    // 获取doc的目录
    NSString* docPath = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)[0];
    // 文件的路径
    NSString* filePath = [docPath stringByAppendingPathComponent:@"xx.png"];

    // 保存到沙盒
    // 1.把image对象转化成data的对象
    NSData* data = UIImagePNGRepresentation(image);
    // 2.通过data对象 调用write to file 的方法 写入到沙盒当中
    [data writeToFile:filePath atomically:YES];
    self.imageView.image = image;

}

实现效果:

并在沙盒存储了

六.裁剪圆形图片

代码如下:

- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
   
    // 3.获取需要裁剪的图片
    UIImage* image = [UIImage imageNamed:@"me"];
   
    // 7.圆心
    CGPoint acrCenter = CGPointMake(image.size.width * 0.5, image.size.height * 0.5);
   
    // 8.图片的大小
    CGSize imageSize = CGSizeMake(image.size.width, image.size.height);
   
    // 1.开启图片类型的图形上下文
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0);
   
    // 4.获取当前上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
   
    // 6.裁剪的区域
    CGContextAddArc(ctx, acrCenter.x, acrCenter.y, imageSize.height * 0.5, 0, 2 * M_PI, 1);
   
    // 5.裁剪
    CGContextClip(ctx);
   
   
    // 9.绘制 从哪话到哪
    [image drawAtPoint:CGPointZero];
   
    // 10.取图片
    UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
   
    // 2.关闭图片类型的图形上下文
    UIGraphicsEndImageContext();
   
    // 11.保存到相册
    UIImageWriteToSavedPhotosAlbum(newImage, self, @selector(image:didFinishSavingWithError:contextInfo:), @"321321321");
}
//判断是否正确的方法,,可以写NULL
- (void)image:(UIImage*)image didFinishSavingWithError:(NSError*)error contextInfo:(void*)contextInfo
{
   
    NSLog(@"%@", contextInfo);
   
    if (error == nil) {
        // 正确
        NSLog(@"123");
    }
    else {
        // 错误
    }

}

实现效果:

运行之后在图片中可以找到

七.带圆环的图片

代码如下:

- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{

    // 3.获取image
    UIImage* image = [UIImage imageNamed:@"me"];

    // 4.边距
    CGFloat margin = 10;

    // 5.获取上下文的大小
    CGSize ctxSize = CGSizeMake(image.size.width + 2 * margin, image.size.height + 2 * margin);

    // 1.开启图片类型的图形上下文
    UIGraphicsBeginImageContextWithOptions(ctxSize, NO, 0);

    // 6.获取当前上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 8.圆心
    CGPoint arcCenter = CGPointMake(ctxSize.width * 0.5, ctxSize.height * 0.5);

    // 9.圆环半径
    CGFloat radius = (ctxSize.width - margin) * 0.5;

    // 7.画圆环
    CGContextAddArc(ctx, arcCenter.x, arcCenter.y, radius, 0, 2 * M_PI, 1);

    // 11.设置线宽
    CGContextSetLineWidth(ctx, margin);

    // 10.渲染圆环
    CGContextStrokePath(ctx);

    // 13.画裁剪的区域
    CGContextAddArc(ctx, arcCenter.x, arcCenter.y, image.size.width * 0.5, 0, 2 * M_PI, 1);

    // 14.裁剪
    CGContextClip(ctx);

    // 12.画图片
    [image drawAtPoint:CGPointMake(margin, margin)];

    // 15.取图片
    image = UIGraphicsGetImageFromCurrentImageContext();

    // 2.关闭
    UIGraphicsEndImageContext();

    // 16.保存到相册
    UIImageWriteToSavedPhotosAlbum(image, NULL, NULL, NULL);

}

实现效果:(运行之后,点击屏幕,然后到照片库找图片)

八.设置水印图片

代码如下:

- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{

    // 3.获取原图片
    UIImage* image = [UIImage imageNamed:@"scene"];

    // 3.1 计算图片的size
    CGSize imageSize = CGSizeMake(image.size.width, image.size.height);

    // 1.开启图片类型的图形上下文
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0);

    // 4.绘制图片
    [image drawAtPoint:CGPointZero];

    // 5.水印的文字
    NSString* str = @"传智播客iOS 十九期";

    // 6.绘制文字水印
    [str drawAtPoint:CGPointMake(30, 30) withAttributes:@{ NSFontAttributeName : [UIFont systemFontOfSize:20], NSForegroundColorAttributeName : [UIColor whiteColor] }];

    // 7.水印的图片
    UIImage* logo = [UIImage imageNamed:@"logo"];

    // 8.绘制图片水印
    [logo drawAtPoint:CGPointMake(imageSize.width - logo.size.width - 30, imageSize.height - logo.size.height - 30)];

    // 9.取图片
    image = UIGraphicsGetImageFromCurrentImageContext();

    // 2.关闭图片类型的图形上下文
    UIGraphicsEndImageContext();

    // 10.保存到相册中
    UIImageWriteToSavedPhotosAlbum(image, NULL, NULL, NULL);

}

实现效果:相册去找

九,屏幕截图

代码如下:

- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
    // 屏幕截图

    // 1.开启图片上下文

          UIGraphicsBeginImageContextWithOptions(self.view1.bounds.size, NO, 0);//需要哪块的截图取决于self什么!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    // 3.获取当前上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 4.截图
    [self.view.layer renderInContext:ctx];

    // 5.获取截图
    UIImage* image = UIGraphicsGetImageFromCurrentImageContext();

    // 2.关闭图片上下文
    UIGraphicsEndImageContext();

    // 6.保存相册
    UIImageWriteToSavedPhotosAlbum(image, NULL, NULL, NULL);

}

实现效果:View1的截图

十.触碰事件

#import "CZView.h"

@implementation CZView


// 手指触摸到当前view的时候 调用
- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
    NSLog(@"%s", __func__);
}

// 手指在view上移动的时候 调用
- (void)touchesMoved:(NSSet*)touches withEvent:(UIEvent*)event
{
    NSLog(@"%s", __func__);
}

// 手指离开的时候
- (void)touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event
{
    NSLog(@"%s", __func__);
}

// 意外中断(就是你玩手机的时候,有人发信息给你的时候调用)
- (void)touchesCancelled:(NSSet*)touches withEvent:(UIEvent*)event
{
    NSLog(@"%s", __func__);

}

实现效果:

十一.触碰事件

数组和集合的差别

#import "CZView.h"

@implementation CZView

// NSSet : 集合
// nsarray : 数组

// 都可以存多个元素

// 有序的位置
// array:有序的
// set:无序的

// 重复的问题
// array:可以重复的
// set不可以重复的

// 遍历的问题
// array:  for  forin
// set:forin

// 取值问题
// array:  array[i]
// set: .anyObject

代码:

// 手指触摸到当前view的时候 调用
- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{

    //    UITouch* t = touches.anyObject;
    //
    //    CGPoint loc = [t locationInView:self];
    //
    //    NSLog(@"%@", NSStringFromCGPoint(loc));
}

// 手指在view上移动的时候 调用
- (void)touchesMoved:(NSSet*)touches withEvent:(UIEvent*)event
{

    UITouch* t = touches.anyObject;

    CGPoint lastLoc = [t previousLocationInView:self.superview];

    CGPoint loc = [t locationInView:self.superview];

    NSLog(@"%@", NSStringFromCGPoint(lastLoc));
    NSLog(@"%@-----", NSStringFromCGPoint(loc));
}

// 手指离开的时候
- (void)touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event
{
}

// 意外中断
- (void)touchesCancelled:(NSSet*)touches withEvent:(UIEvent*)event
{

}

实现效果