iOS 进阶设计之图片角度旋转算法

在图片编辑领域有很多不错的交互设计，比如涂鸦、裁剪、水印、旋转等，一般在网上我们能找到类似微信的实现方案。但是如果想要实现类似系统图片的角度旋转，也就是WhatApp和Telegram他们那样所实现的图片角度旋转裁剪，所书寥寥无几。笔者踏破铁鞋，绞尽脑汁，终于实现了图片角度旋转的算法，在此和需要的朋友一起分享。

先看效果

效果视频

图片角盘旋转

实现思路

1. 通过旋转角度盘，计算出手指左右滑动的距离和角度的对应关系，使得滑动近屏幕宽度一半时，角度旋转45度即π/4。然后让UI设计一张刻度盘，下半圆标刻度-90~90度即可。已知旋转角度，旋转刻度盘，完成第一步。
2. 让图片转起来，图片不仅仅要旋转，同时还要放大，什么样的放大倍数scale才能使图片放大的同时，两个对角沿着裁剪框走（裁剪框不动），使得图片永远不会超出裁剪框？核心就是在求scale和角度θ之间的关系。

旋转算法

相信通过图片，算法大家应该都能看的明白。刚开始感觉没有头绪，很难，但是研究出算法之后回头看，其实就是数学知识，全是scale和θ之间的三角关系。

算法代码

///通过旋转角度获取放大倍数，这里的角度都是弧度
- (CGFloat)getZoomScaleByAngleValue:(CGFloat)angleValue {
    CGFloat θ = fabs(angleValue);
    
    //裁剪框的frame
    CGRect cropFrame = self.cropBoxFrame;
    CGFloat θ1 = atanf(cropFrame.size.width/cropFrame.size.height);
    
    CGFloat scale = 1 / (cosf(θ) - sinf(θ)/tanf(θ+θ1));
    return scale;
}

参考

目前基于的是TOCropViewController，一个外国大佬写的裁剪库，UI简洁，功能丰富，很不错，支持，但是只支持90度旋转，我是基于该库做的角度旋转。