IOS手势识别 电子纸书 查阅器 难点总结

1.功能一：手势识别点击区域的坐标，蒙版选中态　
前提：服务端返回图片是一张高清的ＰＤＦ原始图片，并包含上面每个文字对应区域的坐标信息．

效果图：

image.png

具体实现：
将原始图片坐标转换成相对应于当前iphone屏幕的坐标．
通过图片的宽和高和当前屏幕的宽高比例，转换对应的坐标信息．

公式：CGFloat x = originPoint.x * SCREEN_WIDTH / image.size.width;
CGFloat y = originPoint.y * SCREEN_HEIGHT - KBottomToolHeight / image.size.height;

1)识别点击区域坐标
通过给图片添加单击（双击）手势，在手势的响应方法中通过系统提供的- (CGPoint)locationInView:(nullableUIView*)view;获取当前的点击坐标，但是这里相对的视图必须是当前图片，这样才可以保证缩放查看的情况下坐标的准确性．
2）添加蒙版选中态
通过点击区域获取的坐标，遍历保存转换好的坐标信息的数组，通过判端当前点击坐标是否在每个文字所在的坐标区域，找到对应的文字的区域坐标，初始化一个蒙版视图并将其坐标设置为找到的文字区域坐标，实现选中态．

2.功能二：图片缩放后拖动图片查看功能和点击相应文字弹窗显示对应文字。

弹窗效果图：

image.png

1.图片缩放后拖动图片查看功能
首先给图片添加缩放的手势，设置最大和最小的缩放倍数，并且添加拖动手势这些都比较简单，重点是放大后如何控制图片的移动范围，控制图片只能在屏幕内移动查看，经过研究发现放大后的图片中心点坐标，缩放倍数以及原始图的中心点坐标存在一定的数学关系式：

1.向右移动后的中心点 ：
newcenter.y = scale*_oldCenter.y;
newcenter.x = scale*_oldCenter.x;
2.向左移动后的中心：
newcenter.y = - (scale-1)*_oldCenter.y + _oldCenter.y;
newcenter.x = - (scale-1)*_oldCenter.x + _oldCenter.x;

这样只要我们就可以根据缩放后的中心点来判断缩放后图片的移动边界。

2.点击相应的文字弹窗显示对应文字

在缩放拖动后在通过locationInView去获取点击的坐标Ａ，去作为弹窗的坐标显示是不准确的，这时候我们要用坐标Ａ相对屏幕的坐标Ｂ去显示弹窗才是准确的，经过研究发现缩放情况下拖动图片后的图片中心坐标，图片移动的距离，和坐标Ｂ是存在一定的数学关系的：

CGFloat　distance = CGPointMake(_oldCenter.x*scale-currentImageView.center.x ,_oldCenter.y*scale- currentImageView.center.y);
//当前屏幕显示的真实坐标x
x = self.wordMaskView.frame.origin.x * scale - distance.x;
//当前屏幕显示的真实坐标y
 y = self.wordMaskView.frame.origin.y * scale - distance.y; 

这样我们就可以准确的获取到点击相对当前屏幕的真实坐标来显示弹窗的位置。

３.功能三：从辞书某个字详情页跳转到纸质书页面用红框选中当前的字所对应的ＰＤＦ区域。

效果：

image.png

1.获取当前字的坐标信息，然后从存有转换好的坐标信息的数组中遍历找到当前字的坐标值，这一步比较简单。主要是如何画红色虚线框显示在图片上，并且在图片缩放拖动的情况下保证红色虚线框的显示准确。
第一点画虚线框：画红框可以分为两种方式去画:
1)在知道文字所在区域的正方形的Frame的情况下我们可以 计算出 矩形框四个顶点的坐标，然后一画一画的去绘制虚线框，这种比较好理解，就是比较麻烦。
2)第二种就是在已知Frame的情况下利用系统的CAShapeLayer 和 UIBezierPath 去绘制矩形虚线框。

这里需要注意以下几点：

1. 绘制虚线矩形框一定要依附于一个view，不然显示会有问题
2.view一定要添加在当前的imageview上，不然缩放 拖动的情况下虚线框的大小，位置不会随动。
3.因绘制虚线框需要依附于一个view，所以会让padf的手势无法响应，所以我们需要设置    lineView.userInteractionEnabled = NO;让点击事件不会被阻止。

如何保证图片缩放拖动的情况下保证红色虚线框的显示准确。
实现起来很简单就是我们要把画好的虚线框ａｄｄ到当前图片上，只有这样在　缩放拖动后才可以保证虚线框随着图片的状态一起改变，来保证显示的正确。如果你ａｄｄ到图片的父视图上就会出问题了。

最后给大家推荐个不错的公众号 "说神码"，或者大家可以扫描下面的二维码关注

qrcode_for_gh_3b0177133bdb_258.jpg