iOS 图像绘制小demo(1) -- 放大镜效果

先看效果图

放大镜.gif

再看代码
手指按下事件

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event;

手指移动事件

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event;

手指抬起事件

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event;

裁剪图片方法

/**
*  参数
 *  image: 需要被裁剪的图片
 *  rect: 裁剪范围
*  
*  CGImageCreateWithImageInRect 是C的函数，使用的坐标都是像素
*  在iOS中使用的都是点坐标
*   所以在高分辨率的状态下加载了@2x或@3x的图片，而CGImageCreateWithImageInRect还是以@1x的尺寸去进行裁剪，最终只裁剪了部分尺寸的内容
*  可以通过[UIScreen mainScreen].scale; // 获取当前屏幕坐标与像素坐标的比例
*  在裁剪范围的宽度和高度上都乘以 [UIScreen mainScreen].scale 即可
*/

CGImageCreateWithImageInRect(CGImageRef  _Nullable image, CGRect rect)

我们的代码就在这3个触摸事件中干的
主要代码如下：

//画放大镜的方法
- (void)drawMagnifier:(NSSet<UITouch *> *)touches
{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    self.thumImageView.center = point;
    [self addSubview:self.thumImageView];
//    裁剪放大的小图片
    self.thumImageView.image = [self getImageInPoint:point];
    
    CALayer *mask = [CALayer layer];
    //    可以利用这个属性给CALayer设置backing image。需要用CGImageRef类型的值给contents赋值，不然没有效果。赋值后，CALayer会显示一张图片
    mask.contents = (id)[[UIImage imageNamed:@"Magnifier.bundle/2.png"] CGImage];
    mask.frame = CGRectMake(0, 0, MagnifierWidth, MagnifierWidth);
    self.thumImageView.layer.mask = mask;
    self.thumImageView.layer.masksToBounds = YES;
}

//得到裁剪后图片
- (UIImage *)getImageInPoint:(CGPoint)point
{
    UIImage* bigImage= self.image;
    CGFloat x = point.x * bigImage.size.width/self.frame.size.width - MagnifierWidth * 0.5;
    CGFloat y = point.y * bigImage.size.height/self.frame.size.height - MagnifierWidth * 0.5;
    CGRect rect = CGRectMake(x, y, MagnifierWidth, MagnifierWidth);
    CGImageRef imageRef = bigImage.CGImage;
//    裁剪图片方法,参数:image: 需要被裁剪的图片,rect: 裁剪范围
    CGImageRef subImageRef = CGImageCreateWithImageInRect(imageRef, rect);
//    创建一个基于位图的上下文（context）,并将其设置为当前上下文(context)。
    UIGraphicsBeginImageContext(CGSizeMake(MagnifierWidth, MagnifierWidth));
//    获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
//    绘制文字和图像
    CGContextDrawImage(context, rect, subImageRef);
    UIImage* smallImage = [UIImage imageWithCGImage:subImageRef];
//    关闭上下文
    UIGraphicsEndImageContext();
    return smallImage;
}

demo地址 https://github.com/tmd2013/ImageDemo.git