美文网首页
UIImage 图片裁剪、写入文字、刮刮乐效果

UIImage 图片裁剪、写入文字、刮刮乐效果

作者: 再好一点点 | 来源:发表于2021-08-18 09:55 被阅读0次

这篇文章简单介绍一些图片处理的用法

图片裁剪、高斯模糊

image
//图片裁剪、高斯模糊
//显示两个UIImageView,可以很好地对比效果
//下面这几个image方法是yykit库里边的方法
- (void)clipsImage {
    imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
    UIImage *imag1 = [UIImage imageNamed:@"test"];
    imageView1.image = imag1;
    [self.view addSubview:imageView1];

    imageView2 = [[UIImageView alloc] initWithFrame:CGRectMake(100, imageView1.bottom + 20, 200, 200)];
    UIImage *image2 = [UIImage imageNamed:@"test"];
    //重新设置image大小
    UIImage *image3 = [image2 imageByResizeToSize:CGSizeMake(400, 400)];
    //需要截取的区域
    imageView2.image = [image3 imageByCropToRect:CGRectMake(0, 0, 100, 100)];
    //设置Insets
//    UIImage *image4 = [image2 imageByInsetEdge:UIEdgeInsetsMake(30, 30, 30, 30) withColor:[UIColor redColor]];
//    imageView2.image = image4;
    //设置高斯模糊
//    imageView2.image = [image2 imageByBlurSoft];
    [self.view addSubview:imageView2];
}
//和上面裁剪效果一样
- (void)clipsImage1 {
    imageView0 = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
    UIImage *imag1 = [UIImage imageNamed:@"test"];
    imageView0.image = imag1;
    [self.view addSubview:imageView0];

    imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(100, imageView0.bottom + 20, 200, 200)];
    UIImage *imag = [UIImage imageNamed:@"test"];
    //重新设置将要被裁剪的image大小、设置需要裁剪的区域
    imageView1.image = [UIImage cutImage:imag imageViewSize:CGSizeMake(400, 400) clipRect:CGRectMake(0, 0, 100, 100)];
    [self.view addSubview:imageView1];
}

+ (UIImage *)cutImage:(UIImage *)image
        imageViewSize:(CGSize)size
             clipRect:(CGRect)rect {
    //图片大小和实际显示大小的比例
    CGFloat scale_width = image.size.width/size.width;
    CGFloat scale_height = image.size.height/size.height;
    //实际剪切区域
    CGRect clipRect = CGRectMake(rect.origin.x * scale_width,
                                 rect.origin.y * scale_height,
                                 rect.size.width * scale_width,
                                 rect.size.height * scale_height);

    //开启图形上下文
    UIGraphicsBeginImageContext(clipRect.size);
    //画图
    [image drawAtPoint:CGPointMake(-clipRect.origin.x, -clipRect.origin.y)];

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return newImage;
}

scaleImage

+ (UIImage *)scaleImage:(UIImage *)image sclae:(CGFloat)scale {
    //确定压缩后的size
    CGFloat scaleWidth = image.size.width * scale;
    CGFloat scaleHeight = image.size.height * scale;
    CGSize scaleSize = CGSizeMake(scaleWidth, scaleHeight);
    //开启图形上下文
    UIGraphicsBeginImageContext(scaleSize);
    //绘制图片
    [image drawInRect:CGRectMake(0, 0, scaleWidth, scaleHeight)];

    //从图形上下文获取图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    //关闭图形上下文
    UIGraphicsEndImageContext();
    
    return newImage;
}

图片上边写文字、图片贴在图片上

image
imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(100, 120, 200, 200)];
     UIImage *image = [UIImage imageNamed:@"test"];
     UIImage *image3 = [UIImage waterAtImage:image text:@"这个文章不错" point:imageView1.center attributes:@{NSFontAttributeName: [UIFont systemFontOfSize:36], NSForegroundColorAttributeName: [UIColor redColor]}];
     UIImage *image4 = [UIImage waterAtImage:image3 waterImgae:[UIImage imageNamed:@"test-1"] rect:CGRectMake(50, 50, 100, 100)];
     imageView1.image = image4;
     [self.view  addSubview:imageView1];

+ (UIImage *)waterAtImage:(UIImage *)image
                   text:(NSString *)text
                  point:(CGPoint)point
             attributes:(NSDictionary *)attributes {
    //开启图形上下文
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
    //绘制图片
    [image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
    //添加文字
    [text drawAtPoint:point withAttributes:attributes];
    //获取图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    //关闭上下文
    UIGraphicsEndImageContext();
    return newImage;
}

+ (UIImage *)waterAtImage:(UIImage *)image
             waterImgae:(UIImage *)waterImage
                   rect:(CGRect)rect {
    //开启图形上下文
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
    //绘制原图片
    [image drawInRect:CGRectMake(0, 0, image.size.width, image.size.width)];
    //绘制水印
    [waterImage drawInRect:rect];

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

刮刮乐效果

刮刮乐效果其实就是两个ImageView叠加在一起,在上层imageview添加手势,然后根据手指在imageview划过的痕迹处理为透明色即可。

image
- (void)alphaImage {
     imageView2 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
     imageView2.contentMode = UIViewContentModeCenter;
     UIImage *imag = [UIImage createImageColor:[UIColor yellowColor] size:CGSizeMake(200, 200)];
     imageView2.image = imag;

    imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(100, 120, 200, 200)];
     UIImage *image = [UIImage imageNamed:@"test"];
     UIImage *image3 = [UIImage waterAtImage:image text:@"这个文章不错" point:imageView1.center attributes:@{NSFontAttributeName: [UIFont systemFontOfSize:36], NSForegroundColorAttributeName: [UIColor redColor]}];
     UIImage *image4 = [UIImage waterAtImage:image3 waterImgae:[UIImage imageNamed:@"test-1"] rect:CGRectMake(50, 50, 100, 100)];
     imageView1.image = image4;
     [self.view  addSubview:imageView1];

     [imageView1 addSubview:imageView2];

     imageView1.userInteractionEnabled = YES;
     imageView2.userInteractionEnabled = YES;
     UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pangesture:)];
     [imageView2 addGestureRecognizer:pan];
}

- (void)pangesture:(UIPanGestureRecognizer *)pan {
    CGPoint point = [pan locationInView:imageView2];
    UIImage *image = [UIImage wipeView:imageView2 point:point size:CGSizeMake(20, 20)];
    imageView2.image = image;
}

//size 刮过的路径宽高
+ (UIImage *)wipeView:(UIView *)view
                point:(CGPoint)point
                 size:(CGSize)size {
    //开启图形上下文
    UIGraphicsBeginImageContext(view.bounds.size);
    //获取当前上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //渲染
    [view.layer renderInContext:ctx];
    //计算擦除的rect
    CGFloat clipX = point.x - size.width/2;
    CGFloat clipY = point.y - size.height/2;
    CGRect clipRect = CGRectMake(clipX, clipY, size.width, size.height);
    //将该区域设置为透明
    CGContextClearRect(ctx, clipRect);
    //获取新的图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();
    return newImage;
}

本人原文博客地址

相关文章

  • UIImage 图片裁剪、写入文字、刮刮乐效果

    这篇文章简单介绍一些图片处理的用法 图片裁剪、高斯模糊 scaleImage 图片上边写文字、图片贴在图片上 刮刮...

  • 刮刮乐效果

    实现原理: 利用layer的mask遮罩 + 贝塞尔曲线UIBezierPath 关键代码: 效果图:

  • 刮刮乐效果

    html: javascript部分: 调用方法:

  • 刮刮乐效果

    虽然对于canvas不是很了解,但是写这个效果确实是很常用的,看到这个资料的时候相对于来说这个代码还是比较简单的,...

  • iOS实现刮刮乐功能与图片添加水印功能

    代码简单直接上代码1.创建子视图 2.实现刮刮乐效果 3.图片添加文字水印 4.图片添加图片水印

  • Android刮刮乐效果

    今天看到一个关于刮刮卡的库,经过测试,感觉还不错,使用方法也比较简单,在这里分享一下。转载地址

  • Android刮刮乐效果-proterDuffXfermode

    Android刮刮乐效果-proterDuffXfermode 先看看实现的效果 这个场景主要是模拟我们有些app...

  • canvas 刮刮乐

    今天我们来模拟刮刮乐效果 既然是使用Canvas来完成刮刮乐的效果,那么我们先来创建一个Canvas标签,并给它赋...

  • iOS开发 刮刮乐效果的实现

    引言 我们平时在使用支付宝的时候, 会看到类似彩票刮刮乐的效果。如何实现的呢?下面就直接上代码了... 刮刮乐效果...

  • 刮刮乐

网友评论

      本文标题:UIImage 图片裁剪、写入文字、刮刮乐效果

      本文链接:https://www.haomeiwen.com/subject/pzxubltx.html