【iOS】裁剪出环形图片并旋转制作碟片效果

工作中有一个需求，仿照各大音乐播放app做一个碟片旋转的效果。

后台给的图片是正常的，裁剪边框什么的还是得自己来。

终于整完了，写篇blog纪念一下。

创建一个RotateView，h文件设置两个属性：Image和Rotate。
image来赋值图片，rotate来控制是否旋转。

//重写image的setter方法
-(void)setImage:(UIImage *)image{_image = image;//获取正方形图片UIImage *squarlImage = [self squarlImageWithImage:image];//绘制环形图片squarlImage = [self getClearRectImage:squarlImage];//添加上边框squarlImage = [self drawBorderWithImage:squarlImage];//赋值self.imageView.image = squarlImage;}

图片不一定都是正方形的，还有长方形。这种情况需要先裁剪成正方形，我这边的需求是从center开始。

//图片做成正方形
-(UIImage *)squarlImageWithImage:(UIImage *)image{CGFloat imageWidth = image.size.width;CGFloat imageHeight = image.size.height;//判断图片是否是正方形if (imageWidth == imageHeight) {return image;}//获取正方形的边长CGFloat width = imageWidth;if (imageHeight<imageWidth) {width = imageHeight;}//从中心扩散，以最短边为边长的正方形CGRect rect = CGRectMake((imageWidth-width)/2, (imageHeight-width)/2, width, width);CGImageRef SquareImageRef = CGImageCreateWithImageInRect(image.CGImage,rect);CGRect SquareImageBounds=CGRectMake(0,0,CGImageGetWidth(SquareImageRef),CGImageGetHeight(SquareImageRef));UIGraphicsBeginImageContext(SquareImageBounds.size);CGContextRef context =UIGraphicsGetCurrentContext();CGContextDrawImage(context,SquareImageBounds,SquareImageRef);UIImage* SquareImage = [UIImage imageWithCGImage:SquareImageRef];UIGraphicsEndImageContext();CGImageRelease(SquareImageRef);return SquareImage;
}

这样就获取到了一张正方形图片，接下来就可以开始裁剪环形了。

- (UIImage*)getClearRectImage:(UIImage*)image{UIGraphicsBeginImageContextWithOptions(image.size,NO,0.0f);CGContextRef ctx =UIGraphicsGetCurrentContext();//最外层圆的路径UIBezierPath *circlePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, image.size.width, image.size.height) cornerRadius:image.size.width/2];[circlePath addClip]; // 裁剪// 绘制图片到图片上下文中[image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];[image drawAtPoint:CGPointZero];//内部圆的半径CGFloat bigRaduis = image.size.width/10;CGRect cirleRect =CGRectMake(image.size.width/2-bigRaduis, image.size.height/2-bigRaduis, bigRaduis*2, bigRaduis*2);CGContextAddEllipseInRect(ctx,cirleRect);CGContextClip(ctx);CGContextClearRect(ctx,cirleRect);UIImage*newImage =UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();return newImage;
}

环形图片已经有了，还差两圈白色边框

-(UIImage *)drawBorderWithImage:(UIImage *)image{UIGraphicsBeginImageContextWithOptions(image.size,NO,0.0f);CGContextRef ctx = UIGraphicsGetCurrentContext();CGRect bigRect = CGRectMake(3,3,image.size.width-6,image.size.height-6);//设置空心圆的线条宽度CGContextSetLineWidth(ctx, 6);//以矩形bigRect为依据画一个圆CGContextAddEllipseInRect(ctx, bigRect);//填充当前绘画区域的颜色[[UIColor whiteColor] set];//(如果是画圆会沿着矩形外围描画出指定宽度的（圆线）空心圆)/（根据上下文的内容渲染图层）CGContextStrokePath(ctx);//画一个小圆CGFloat bigRaduis = image.size.width/10;CGRect smallRect =CGRectMake(image.size.width/2-bigRaduis, image.size.height/2-bigRaduis, bigRaduis*2, bigRaduis*2);//设置空心圆的线条宽度CGContextSetLineWidth(ctx, 6);//以矩形Rect为依据画一个圆CGContextAddEllipseInRect(ctx, smallRect);//填充当前绘画区域的颜色[[UIColor whiteColor] set];//(如果是画圆会沿着矩形外围描画出指定宽度的（圆线）空心圆)/（根据上下文的内容渲染图层）CGContextStrokePath(ctx);//图片绘制进去[image drawInRect:bigRect];UIImage*newImage =UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();return newImage;
}

ok，这样就已经完成了碟片效果的图片，接下来就是让他随着播放旋转了。

重写rotate属性的setter方法来实现控制旋转开始暂停。

-(void)setIsRotate:(BOOL)isRotate{_isRotate = isRotate;//开始旋转if (isRotate) {//是否有上次暂停的时间if (self.imageView.layer.timeOffset == 0.0) {//没有，说明是第一次旋转CABasicAnimation* rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];rotateAnimation.fromValue = [NSNumber numberWithFloat:0.0];rotateAnimation.toValue = [NSNumber numberWithFloat:M_PI * 2];   // 旋转一周rotateAnimation.duration = 10.0;                               // 旋转时间20秒rotateAnimation.repeatCount = MAXFLOAT;                          // 重复次数，这里用最大次数[self.imageView.layer addAnimation:rotateAnimation forKey:nil];}else{//有。说明是旋转中途暂停过，继续上次的位置来旋转CFTimeInterval pausedTime = self.imageView.layer.timeOffset;self.imageView.layer.speed = 1.0;self.imageView.layer.timeOffset = 0.0;self.imageView.layer.beginTime = 0.0;CFTimeInterval timeSincePause = [self.imageView.layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;self.imageView.layer.beginTime = timeSincePause;}}else{//暂停旋转，保存当前旋转的进度，在下次开始旋转时使用CFTimeInterval pausedTime = [self.imageView.layer convertTime:CACurrentMediaTime() fromLayer:nil];self.imageView.layer.speed = 0.0;    ///<停止self.imageView.layer.timeOffset = pausedTime;    ///<保存时间}
}

完成！

【iOS】裁剪出环形图片并旋转制作碟片效果相关推荐

Unity中通过mask组件裁剪出圆形图片，制作出圆形头像
1.首先找一张圆形图片和长方形图片 2.添加Image控件,同时将图片换成圆形图片 3.在第一个Image下再放一个Image控件,同时将图片换成长方形图片 4.最关键的一步来了,点击第一个Image ...
ios 裁剪框大小_ios 图片裁剪修改尺寸的方法总结
目前使用过的图片裁剪方法 1.等比例压缩裁剪出的图片是以asize最小值为边框的正方形图片 //修改图片尺寸同比缩放 + (UIImage*)thumbnailWithImageWithoutSca ...
thinkphp5 图片压缩旋转_有非常多的图片，该怎么制作PPT？
hello,大家好,我是利兄~ 上周有一位粉丝朋友问我:"多张图片的PPT到底该如何排版,有什么小妙招没?" 所以,今天,我们就来聊聊PPT中多图排版的问题? 通常情况下,遇到多张 ...
轴旋转——制作别样的图片浏览器
首页博客学院下载 GitChat TinyMind 论坛问答商城 VIP 活动招聘 ITeye CSTO 写博客发Chat 贵公子丶笔记千里之行,始于足下. RSS订阅转 Andro ...
iOS开发- 相机(摄像头)获取到的图片自动旋转90度解决办法
http://www.tuicool.com/articles/IfEZre 今天写demo的时候发现, 如果把通过相机获取到的图片,直接进行操作, 比如裁剪, 缩放, 则会把原图片向又旋转90度. ...
ios 拍照上传到服务器_ios端浏览器拍照上传到服务器，图片被旋转90度 php 解决方案...
1.可以通过前端进行解决,本案例通过后端解决的判断请求的浏览器的ua,如果是ios浏览器则进行90度旋转重点来了: 必须确保检测的图片是ios设备上传的完整图片,不要在前端压缩过的,因为压缩后的图 ...
ios新手开发——toast提示和旋转图片加载框
不知不觉自学ios已经四个月了,从OC语法到app开发,过程虽然枯燥无味,但是结果还是挺有成就感的,在此分享我的ios开发之路中的小小心得~废话不多说,先上我们今天要实现的效果图: 有过一点做APP经 ...
解决H5 IOS手机图片上传时图片会旋转90°问题
解决H5 IOS手机图片上传时图片会旋转90°问题 Vant 官方给出的解答需要自己解决,没有处理. 解决办法主要使用了 compressorjs 插件库一.Vant UI库Uploader 组件图 ...
上传图片的时候，ios手机的图片会旋转90°
1.问题:在html5中利用canvas对上传图片压缩的时候,ios手机竖着拍照时,图片会旋转90°,其他情况正常. 2.解决方法:获取拍照角度,对Ios竖着拍的照片进行角度处理 3.利用exif.j ...

【iOS】裁剪出环形图片并旋转制作碟片效果

【iOS】裁剪出环形图片并旋转制作碟片效果相关推荐

最新文章

热门文章