首页 > 其他 > 详细

手势与变形 、 视图与坐标系

时间：2015-12-15 21:13:41      阅读：229      评论：0      收藏：0      [点我收藏+]

1 使用点击手势实现单击和双击手势

1.1 问题

UITapGestureRecognizer点击手势，通常用于单击和双击某个视图。本案例使用UITapGestureRecognizer点击手势实现单击和双击，如图-1、图-2所示：

技术分享

图-1

技术分享

图-2

1.2 方案

首先创建Xcode项目，在Storyboard中拖放一个ImageView控件和Label控件，在右边栏设置好相关属性，此时注意将ImageView的用户交互功能打开，否则无法识别手势。

其次将ImageView和Label控件关联成TRViewController的属性imageView和label。在TRViewController类中的viewDidLoad方法中创建一个UITapGestureRecognizer手势tapGR，使用initWithTarget: action:方法进行初始化并添加事件方法tap:。

将tap手势的numberOfTapsRequired属性设置为1，表示点击一下的意思即单击。最后将手势添加到view中，实现方法tap：点击view则在label上显示“view被点击了一下”。

然后在TRViewController类中的viewDidLoad方法中创建一个UITapGestureRecognizer手势doubleTap，使用initWithTarget: action:方法进行初始化并添加事件方法doubleTap:。

将doubleTap手势的numberOfTapsRequired属性设置为2，表示点击两下的意思即双击。最后将手势添加到imageView中，实现方法doubletap：点击imageView则在label上显示“imageView被点击了两下”。

1.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建项目搭建界面

首先创建Xcode项目，在Storyboard中拖放一个ImageView控件和Label控件，在右边栏设置好相关属性，此时注意将ImageView的用户交互功能打开，否则无法识别手势，如图-3所示：

技术分享

图-3

步骤二：创建单击手势，添加到界面

首先将ImageView和Label控件关联成TRViewController的属性imageView和label，代码如下所示：

 
  1. @interface TRViewController ()
  2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
  3. @property (weak, nonatomic) IBOutlet UILabel *label;
  4. @end

然后在TRViewController类中的viewDidLoad方法中创建一个UITapGestureRecognizer手势tapGR，使用initWithTarget: action:方法进行初始化并添加事件方法tap：，代码如下所示：

 
  1. UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];

将tap手势的numberOfTapsRequired属性设置为1，表示点击一下的意思即单击。最后将手势添加到view中，代码如下所示：

 
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4.     //创建手势对象
  5. UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
  6. //设置相关属性
  7. tapGR.numberOfTapsRequired = 1;
  8. tapGR.numberOfTouchesRequired = 1;
  9. //将手势对象加入到需要识别手势的视图
  10. [self.view addGestureRecognizer:tapGR];
  11. }

最后实现方法tap：，当点击view则在label上显示“view被点击了一下”，代码如下所示：

  1. - (void)tap:(UITapGestureRecognizer *)gr
  2. {
  3. self.label.text = @"view被点击了一下";
  4. }

步骤三：创建双击手势，添加到界面

然后在TRViewController类中的viewDidLoad方法中创建一个UITapGestureRecognizer手势doubleTap，使用initWithTarget: action:方法进行初始化并添加事件方法doubleTap：，代码如下所示：

 
  1. UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(doubleTap:)];

将doubleTap手势的numberOfTapsRequired属性设置为2，表示点击两下的意思即双击。最后将手势添加到view中，代码如下所示：

 
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4. UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
  5. tapGR.numberOfTapsRequired = 1;
  6. tapGR.numberOfTouchesRequired = 1;
  7. [self.view addGestureRecognizer:tapGR];
  8. UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(doubleTap:)];
  9. [doubleTap setNumberOfTapsRequired:2];
  10. [self.imageView addGestureRecognizer:doubleTap];
  11. }

最后实现方法doubleap：，当点击imageView则在label上显示“imageView被点击了两下”，代码如下所示：

  1. -(void)doubleTap:(UITapGestureRecognizer*)gr {
  2. self.label.text = @"imageView被点击了两下";
  3. }

1.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 
  1. #import "TRViewController.h"
  3. @interface TRViewController ()
  4. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
  5. @property (weak, nonatomic) IBOutlet UILabel *label;
  6. @end
  8. @implementation TRViewController
  9. - (void)viewDidLoad
  10. {
  11. [super viewDidLoad];
  12.     //1. 创建手势对象
  13. UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
  14. //2. 设置相关属性
  15. tapGR.numberOfTapsRequired = 1;
  16. tapGR.numberOfTouchesRequired = 1;
  17. //3. 将手势对象加入到需要识别手势的视图
  18. [self.view addGestureRecognizer:tapGR];
  20. UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(doubleTap:)];
  21. [doubleTap setNumberOfTapsRequired:2];
  22. [self.imageView addGestureRecognizer:doubleTap];
  23. }
  24. - (void)tap:(UITapGestureRecognizer *)gr
  25. {
  26. self.label.text = @"view被点击了一下";
  27. }
  28. -(void)doubleTap:(UITapGestureRecognizer*)gr {
  30. self.label.text = @"imageView被点击了两下";
  31. }
  32. @end
 

2 使用轻扫手势切换两张图片

2.1 问题

UISwipeGestureRecognizer轻扫手势，通常用于翻书、翻页、切换画面等效果。本案例将使用UISwipeGestureRecognizer轻扫手势实现两张图片的切换显示，如图-4、图-5所示：

技术分享

图-4

技术分享

图-5

2.2 方案

首先创建Xcode项目，在Storyboard中拖放两个和屏幕一样大小的ImageView控件，在屏幕上叠放在一起。

其次在TRViewController类中的viewDidLoad方法中创建一个UISwipeGestureRecognizer手势swipeGR，使用initWithTarget: action:方法进行初始化并添加事件方法swipe:。

将swipe手势的direction属性设置为左右，表示从右向左轻滑或者由左向右轻滑都可以触发手势的动作事件。然后将手势添加到self.view中。

最后将手势添加到view中，实现方法swipe:，当滑动图片则切换两个ImageView的显示顺序。

2.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建项目搭建界面

首先创建Xcode项目，在Storyboard中拖放两个和屏幕一样大小的ImageView控件，在屏幕上叠放在一起，如图-6所示：

技术分享

图-6

步骤二：创建swipe手势，添加到界面

在TRViewController类中的viewDidLoad方法中创建一个UISwipeGestureRecognizer手势swipeGR，使用initWithTarget: action:方法进行初始化并添加事件方法swipe:，代码如下所示：

  1. UISwipeGestureRecognizer *swipeGR = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipe:)];

将swipe手势的direction属性设置为左右，表示从右向左轻滑或者由左向右轻滑都可以触发手势的动作事件，并将手势添加到self.view中，代码如下所示：

 
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4.     UISwipeGestureRecognizer *swipeGR = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipe:)];
  5. swipeGR.direction = UISwipeGestureRecognizerDirectionLeft | UISwipeGestureRecognizerDirectionRight ;
  6. [self.view addGestureRecognizer:swipeGR];
  7. }

步骤三：实现事件方法swipe:

实现方法swipe:，当滑动图片则切换两个ImageView的显示顺序，代码如下所示：

  1. - (void)swipe:(UISwipeGestureRecognizer *)gr
  2. {
  3. [self.view exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
  4. NSLog(@"%@",self.view.subviews);
  5. }

2.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 
  1. #import "TRViewController.h"
  3. @implementation TRViewController
  5. - (void)viewDidLoad
  6. {
  7. [super viewDidLoad];
  8.     UISwipeGestureRecognizer *swipeGR = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipe:)];
  9. swipeGR.direction = UISwipeGestureRecognizerDirectionLeft | UISwipeGestureRecognizerDirectionRight ;
  10. [self.view addGestureRecognizer:swipeGR];
  11. }
  13. - (void)swipe:(UISwipeGestureRecognizer *)gr
  14. {
  15. [self.view exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
  16. NSLog(@"%@",self.view.subviews);
  17. }
  18. @end
 

3 使用缩放手势改变textView的显示状态和字体大小

3.1 问题

UIPinchGestureRecognizer缩放手势，通常用于缩放图片或视图，本案例使用UIPinchGestureRecognizer缩放手势实现改变textView的字体大小，当缩小速度足够快时则隐藏textView，如图-7所示：

技术分享

图-7

3.2 方案

首先创建Xcode项目，在Storyboard中拖放一个适当大小的TextView控件，在右边栏的检查器四中设置好显示的文字内容和背景颜色。将TextView关联成TRViewControlle的属性textView。

然后在TRViewController类中的viewDidLoad方法中创建一个UIPinchGestureRecognizer手势pinchGR，使用initWithTarget: action:方法进行初始化并添加事件方法pinch:。将pinchGR添加到self.view中。

UIPinchGestureRecognizer类型的手势有两个常用的属性scale和velocity，scale表示缩放的比例，velocity表示缩放的速度。这两个属性都为只读属性。

最后实现pinch:方法，该方法中根据velocity属性的值判断是否显示textView，根据scale属性的值计算textView的字体大小。

3.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建项目搭建界面

首先创建Xcode项目，在Storyboard中拖放一个适当大小的TextView控件，在右边栏的检查器四中设置好显示的文字内容和背景颜色。将TextView关联成TRViewControlle的属性textView，代码如下所示：

 
  1. @interface TRViewController ()
  2. @property (weak, nonatomic) IBOutlet UITextView *textView;
  3. @end

步骤二：创建pinch手势，添加到界面

在TRViewController类中的viewDidLoad方法中创建一个UIPinchGestureRecognizer手势pinchGR，使用initWithTarget: action:方法进行初始化并添加事件方法pinch:，并将pinchGR添加到self.view中，代码如下所示：

 
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4.     UIPinchGestureRecognizer *pinchGR = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(pinch:)];
  5. [self.view addGestureRecognizer:pinchGR];
  6. }

步骤三：实现事件方法pinch:

实现pinch:方法，该方法中根据velocity属性的值判断是否显示textView，当velocity的值小于-10时则隐藏textView，大于10 则显示textView。再根据scale属性的值计算textView的字体大小，代码如下所示：

 
  1. - (void)pinch:(UIPinchGestureRecognizer *)gr
  2. {
  3. if (gr.velocity < -10) {
  4. self.textView.hidden = YES;
  5. }else if (gr.velocity > 10) {
  6. self.textView.hidden = NO;
  7. }else{
  8. self.textView.font = [UIFont systemFontOfSize:17 * gr.scale];
  9. }
  10. }

3.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 
  1. #import "TRViewController.h"
  3. @interface TRViewController ()
  4. @property (weak, nonatomic) IBOutlet UITextView *textView;
  5. @end
  7. @implementation TRViewController
  8. - (void)viewDidLoad
  9. {
  10. [super viewDidLoad];
  11.     UIPinchGestureRecognizer *pinchGR = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(pinch:)];
  12. [self.view addGestureRecognizer:pinchGR];
  13. }
  14. - (void)pinch:(UIPinchGestureRecognizer *)gr
  15. {
  16. if (gr.velocity < -10) {
  17. self.textView.hidden = YES;
  18. }else if (gr.velocity > 10) {
  19. self.textView.hidden = NO;
  20. }else{
  21. self.textView.font = [UIFont systemFontOfSize:17 * gr.scale];
  22. }
  23. }
  24. @end
 

4 使用拖动手势移动图片

4.1 问题

UIPanGestureRecognizer拖动手势，通常用于移动某个视图的位置，本案例使用UIPanGestureRecognizer拖动手势移动图片，根据手指触屏的坐标改变图片的位置，如图-8、图-9所示：

技术分享

图-8

技术分享

图-9

4.2 方案

首先创建Xcode项目，在Storyboard中拖放一个适当大小的ImageView控件，在右边栏的检查器四中设置好显示图片。将ImageView控件关联成TRViewControlle的属性imageView。

然后在TRViewController类中的viewDidLoad方法中创建一个UIPanGestureRecognizer手势panGR，使用initWithTarget: action:方法进行初始化并添加事件方法pan:。将panGR添加到self.view中。

所有的手势都有一个UIGestureRecognizerState枚举类型的属性state，用来表示手势的状态，包括手势的开始、变化和结束。

最后实现pan:方法，该方法中根据手势不同的状态改变imageView的坐标和大小，使imageView的center根据手指触摸点改变。

4.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建项目搭建界面

首先创建Xcode项目，在Storyboard中拖放一个适当大小的Imageview控件，在右边栏的检查器四中设置好显示图片。将ImageView控件关联成TRViewControlle的属性imageView，代码如下所示：

  1. @interface TRViewController ()
  2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
  3. @end

步骤二：创建pan手势，添加到界面

在TRViewController类中的viewDidLoad方法中创建一个UIPanGestureRecognizer手势panGR，使用initWithTarget: action:方法进行初始化并添加事件方法pan:，并将panGR添加到self.view中，代码如下所示：

 
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4.     UIPanGestureRecognizer *panGR = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
  5. panGR.minimumNumberOfTouches = 1;
  6. [self.view addGestureRecognizer:panGR];
  7. }

步骤三：实现事件方法pan:

实现pan:方法，该方法中根据手势不同的状态改变imageView的坐标和大小，使imageView的center根据手指触摸点改变。

当state的值等于UIGestureRecognizerStateBegan时将imageView的大小设置为原来大小的0.5倍，当state的值等于UIGestureRecognizerStateChanged时imageView的center跟着手指触摸点移动，当state的值等于UIGestureRecognizerStateEnded时imageView的大小变回原来的大小，代码如下所示：

 
  1. - (void)pan:(UIPanGestureRecognizer *)gr
  2. {
  3. if (gr.state == UIGestureRecognizerStateBegan) {
  4. self.imageView.frame = CGRectMake(self.imageView.frame.origin.x, self.imageView.frame.origin.y, self.imageView.frame.size.width*0.5, self.imageView.frame.size.height*0.5);
  5. }else if(gr.state == UIGestureRecognizerStateChanged){
  6. self.imageView.center = [gr locationInView:self.view];
  7. }else if(gr.state == UIGestureRecognizerStateEnded){
  8. self.imageView.frame = CGRectMake(self.imageView.frame.origin.x, self.imageView.frame.origin.y, self.imageView.frame.size.width*2, self.imageView.frame.size.height*2);
  9. }
  10. }

4.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 
  1. #import "TRViewController.h"
  3. @interface TRViewController ()
  4. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
  5. @end
  7. @implementation TRViewController
  9. - (void)viewDidLoad
  10. {
  11. [super viewDidLoad];
  12.     UIPanGestureRecognizer *panGR = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
  13. panGR.minimumNumberOfTouches = 1;
  14. [self.view addGestureRecognizer:panGR];
  15. }
  16. - (void)pan:(UIPanGestureRecognizer *)gr
  17. {
  18. if (gr.state == UIGestureRecognizerStateBegan) {
  19. self.imageView.frame = CGRectMake(self.imageView.frame.origin.x, self.imageView.frame.origin.y, self.imageView.frame.size.width*0.5, self.imageView.frame.size.height*0.5);
  20. }else if(gr.state == UIGestureRecognizerStateChanged){
  21. self.imageView.center = [gr locationInView:self.view];
  22. }else if(gr.state == UIGestureRecognizerStateEnded){
  23. self.imageView.frame = CGRectMake(self.imageView.frame.origin.x, self.imageView.frame.origin.y, self.imageView.frame.size.width*2, self.imageView.frame.size.height*2);
  24. }
  25. }
  26. @end

5 结合手势对图片进行缩放、旋转和位移

5.1 问题

变形transform是视图（View）的一个CGAffineTransform结构体类型的属性，可以使视图产生缩放、旋转、位移等变化。本案例结合手势实现对一张图片的变形，包括缩放、旋转和位移，如图-10、图-11所示：

技术分享

图-10

技术分享

图-11

5.2 方案

首先创建Xcode项目，在TRViewController类中定义一个UIImageView类型的属性imageView。然后在viewDidLoad方法中创建一个UIImageView对象imageView添加到父视图中，并根据父视图的宽高比计算出imageView的宽高，将imageView放置在父视图的中间。将属性imageView指向该对象。

其次将imageView的用户交互功能打开，然后在viewDidLoad方法中创建一个旋转手势rotationGR，将手势的响应方法命名为rotate：，最后将旋转手势添加到imageView上。

rotate：方法中通过CGAffineTransformRotate函数改变imageView的transform属性，实现imageView旋转的功能。

然后在viewDidLoad方法中创建一个缩放手势pinchGR，将手势的响应方法命名为pinch:，最后将缩放手势添加到imageView上。

pinch:方法中通过CGAffineTransformScale函数改变imageView的transform属性，实现imageView缩放的功能。

默认情况下，视图在同一时刻只能识别一种手势。如果想要同时识别多种手势就需要给手势指定委托，让手势对象之间进行通信协商两个手势是否能够一起工作。

本案例中旋转手势和缩放手势是可以一起工作的，所以将rotationGR和pinchGR的delegate赋值为TRViewController，TRViewController通过实现协议方法shouldRecognizeSimultaneouslyWithGestureRecognizer:使两个手势能够同时被识别。

最后再创建一个拖拽手势和双击手势添加到imageView上，分别实现拖拽手势和双击手势的响应方法。

5.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建imageView对象

在TRViewController类中定义一个UIImageView类型的属性imageView。然后在viewDidLoad方法中创建一个UIImageView对象imageView添加到父视图中，并根据父视图的宽高比计算出imageView的宽高，将imageView放置在父视图的中间。将属性imageView指向该对象，代码如下所示：

 
  1. //根据父视图宽高计算imageView的宽高
  2. - (void)relocation
  3. {
  4. float horizontalScale = self.view.bounds.size.width / self.imageView.bounds.size.width;
  5. float verticalScale = self.view.bounds.size.height / self.imageView.bounds.size.height;
  6. float realScale = horizontalScale < verticalScale ? horizontalScale:verticalScale;
  7. self.imageView.transform = CGAffineTransformMakeScale(realScale, realScale);
  8. }
  9. //创建imageView对象
  10. - (void)viewDidLoad
  11. {
  12. [super viewDidLoad];
  13.     UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"Elephant.jpg"]];
  14. self.imageView = imageView;
  15. [self.view addSubview:imageView];
  16. imageView.center = self.view.center;
  17. [self relocation];
  18. }

步骤二：创建旋转手势，添加到imageView

首先将imageView的用户交互功能打开，然后在viewDidLoad方法中创建一个旋转手势rotationGR，将手势的响应方法命名为rotate：，最后将旋转手势添加到imageView上，代码如下所示：

  1. //打开imageView的交互功能
  2. imageView.userInteractionEnabled = YES;
  3. //创建旋转手势
  4. UIRotationGestureRecognizer *rotationGR = [[UIRotationGestureRecognizer alloc]initWithTarget:self action:@selector(rotate:)];
  5. [imageView addGestureRecognizer:rotationGR];

实现rotate：方法，在该方法中通过CGAffineTransformRotate函数改变imageView的transform属性，实现imageView旋转的功能，代码如下所示：

  1. - (void)rotate:(UIRotationGestureRecognizer *)gr
  2. {
  3. self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, gr.rotation);
  4. gr.rotation = 0;
  5. }

步骤三：创建缩放手势，添加到imageView

首先在viewDidLoad方法中创建一个缩放手势pinchGR，将手势的响应方法命名为pinch:，再将缩放手势添加到imageView上，代码如下所示：

 
  1. UIPinchGestureRecognizer *pinchGR = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(pinch:)];
  2. [imageView addGestureRecognizer:pinchGR];

然后实现pinch:方法，在该方法中通过CGAffineTransformScale函数改变imageView的transform属性，实现imageView缩放的功能，代码如下所示：

  1. - (void)pinch:(UIPinchGestureRecognizer *)gr
  2. {
  3. self.imageView.transform = CGAffineTransformScale(self.imageView.transform, gr.scale, gr.scale);
  4. gr.scale = 1;
  5. }

步骤四：使旋转和缩放手势能够同时被识别

首先在viewDidLoad方法中将rotationGR和pinchGR的delegate属性赋值为当前视图控制器即TRViewController，代码如下所示：

 
  1. //通过委托，让rotation和pinch可以同时被识别
  2. rotationGR.delegate = self;
  3. pinchGR.delegate = self;

然后在TRViewController类中通过实现协议方法shouldRecognizeSimultaneouslyWithGestureRecognizer:，使两个手势能够同时被识别，代码如下所示：

 
  1. //两个手势对象是否可以同时识别
  2. -(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer
  3. shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
  4. {
  5. if ([gestureRecognizer isKindOfClass:[UIRotationGestureRecognizer class] ]&& [otherGestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]]) {
  6. return YES;
  7. }else if([gestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]]&&[otherGestureRecognizer isKindOfClass:[UIRotationGestureRecognizer class]]){
  8. return YES;
  9. }
  10. return NO;
  11. }

步骤五：创建拖拽手势和双击手势

首先在viewDidLoad方法中创建一个拖拽手势panGR，将手势的响应方法命名为pan:，然后将缩放手势添加到imageView上，代码如下所示：

 
  1. UIPanGestureRecognizer *panGR = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
  2. [imageView addGestureRecognizer:panGR];

然后实现pan:方法，该方法中通过CGAffineTransformTranslate函数改变imageView的transform属性，实现imageView的位移功能，代码如下所示：

再创建一个双击手势tapGR，将手势的响应方法命名为tap:，然后将缩放手势添加到imageView上，代码如下所示：

  1. UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
  2. tapGR.numberOfTapsRequired = 2;
  3. [imageView addGestureRecognizer:tapGR];

最后实现tap:方法，双击imageView则将imageView置为最初的状态。所示tap:方法中直接调用relocation方法即可，代码如下所示：

 
  1. - (void)tap:(UITapGestureRecognizer *)gr
  2. {
  3. [self relocation];
  4. }

5.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 
  1. #import "TRViewController.h"
  3. @interface TRViewController () <UIGestureRecognizerDelegate>
  4. @property (strong, nonatomic) UIImageView *imageView;
  5. @end
  7. @implementation TRViewController
  8. - (void)viewDidLoad
  9. {
  10. [super viewDidLoad];
  11.     UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"Elephant.jpg"]];
  12. self.imageView = imageView;
  13. [self.view addSubview:imageView];
  14. imageView.center = self.view.center;
  15. [self relocation];
  16. //打开用户交互
  17. imageView.userInteractionEnabled = YES;
  18. //添加旋转手势
  19. UIRotationGestureRecognizer *rotationGR = [[UIRotationGestureRecognizer alloc]initWithTarget:self action:@selector(rotate:)];
  20. [imageView addGestureRecognizer:rotationGR];
  21. //添加缩放手势
  22. UIPinchGestureRecognizer *pinchGR = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(pinch:)];
  23. [imageView addGestureRecognizer:pinchGR];
  25. //添加拖拽手势
  26. UIPanGestureRecognizer *panGR = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
  27. [imageView addGestureRecognizer:panGR];
  28. //添加双击手势
  29. UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
  30. tapGR.numberOfTapsRequired = 2;
  31. [imageView addGestureRecognizer:tapGR];
  33. //通过委托，让rotation和pinch可以同时被识别
  34. rotationGR.delegate = self;
  35. pinchGR.delegate = self;
  36. }
  38. - (void)rotate:(UIRotationGestureRecognizer *)gr
  39. {
  40. self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, gr.rotation);
  41. gr.rotation = 0;
  42. }
  44. - (void)pinch:(UIPinchGestureRecognizer *)gr
  45. {
  46. self.imageView.transform = CGAffineTransformScale(self.imageView.transform, gr.scale, gr.scale);
  47. gr.scale = 1;
  48. }
  50. - (void)pan:(UIPanGestureRecognizer *)gr
  51. {
  52. CGPoint p = [gr translationInView:self.imageView];
  53. self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, p.x, p.y);
  54. [gr setTranslation:CGPointZero inView:self.imageView];
  55. }
  57. - (void)tap:(UITapGestureRecognizer *)gr
  58. {
  59. [self relocation];
  60. }
  61. - (void)relocation
  62. {
  63. float horizontalScale = self.view.bounds.size.width / self.imageView.bounds.size.width;
  64. float verticalScale = self.view.bounds.size.height / self.imageView.bounds.size.height;
  65. float realScale = horizontalScale < verticalScale ? horizontalScale:verticalScale;
  66. self.imageView.transform = CGAffineTransformMakeScale(realScale, realScale);
  67. }
  69. #pragma mark - UIGestureRecognizerDelegate
  70. //两个手势对象是否可以同时识别
  71. - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
  72. {
  73. if ([gestureRecognizer isKindOfClass:[UIRotationGestureRecognizer class] ]&& [otherGestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]]) {
  74. return YES;
  75. }else if([gestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]]&&[otherGestureRecognizer isKindOfClass:[UIRotationGestureRecognizer class]]){
  76. return YES;
  77. }
  78. return NO;
  79. }
  80. @end
 

6 演示坐标系四个成员之间的关系

6.1 问题

本案例直接在上一个案例的基础之上增加两个Label查看frame、bounds以及transform之间的关系，如图-12所示：

技术分享

图-12

6.2 方案

首先在上一个案例的界面上添加两个UILabel控件frameLabel和boundslabel，分别用于显示imageView的frame和bounds值。

然后为了观察frame、bounds根据变形产生的变化，在各个手势方法中添加一个用于实时显示imageView的frame和bounds的方法trace。运行程序，可以看出frame会随着transform的变化而变化，bounds始终保持不变。

最后在imageView的右上角75%的位置上添加一个UILable类型的子视图。

6.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：在界面上添加frameLabel和boundslabel

首先在上一个案例的界面上添加两个UILabel控件frameLabel和boundslabel，分别用于显示imageView的frame和bounds值，代码如下所示：

 
  1. UILabel *frameLabel = [[UILabel alloc]init];
  2. self.frameLabel = frameLabel;
  3. frameLabel.frame = CGRectMake(10, 30, 300, 30);
  4. frameLabel.font = [UIFont italicSystemFontOfSize:20];
  5. frameLabel.textColor = [UIColor redColor];
  6. frameLabel.backgroundColor = [UIColor clearColor];
  7. frameLabel.shadowColor = [UIColor greenColor];
  8. frameLabel.shadowOffset = CGSizeMake(1, 1);
  9. frameLabel.text = @"Frame";
  10. [self.view addSubview:frameLabel];
  12. UILabel *boundsLabel = [[UILabel alloc]init];
  13. self.boundsLabel = boundsLabel;
  14. boundsLabel.frame = CGRectMake(10, 70, 300, 30);
  15. boundsLabel.font = [UIFont italicSystemFontOfSize:20];
  16. boundsLabel.textColor = [UIColor redColor];
  17. boundsLabel.backgroundColor = [UIColor clearColor];
  18. boundsLabel.shadowColor = [UIColor greenColor];
  19. boundsLabel.shadowOffset = CGSizeMake(1, 1);
  20. boundsLabel.text = @"Bounds";
  21. [self.view addSubview:boundsLabel];

步骤二：实现trace方法

为了观察frame、bounds根据变形产生的变化，在各个手势方法中添加一个用于实时显示imageView的frame和bounds的方法trace，代码如下所示：

 
  1. - (void)trace
  2. {
  3. self.frameLabel.text = [NSString stringWithFormat:@"%.2f, %.2f, %.2f, %.2f", self.imageView.frame.origin.x, self.imageView.frame.origin.y, self.imageView.frame.size.width, self.imageView.frame.size.height];
  4. self.boundsLabel.text = [NSString stringWithFormat:@"%.2f, %.2f, %.2f, %.2f", self.imageView.bounds.origin.x, self.imageView.bounds.origin.y, self.imageView.bounds.size.width, self.imageView.bounds.size.height];
  5. }

然后运行程序，可以看出frame会随着transform的变化而变化，而bounds始终保持不变。

步骤三：在imageView的右上角子视图label

在imageView的右上角75%的位置上添加一个UILable类型的子视图label。此时label的frame需要根据imageView的bounds来进行计算，而不是imageView的frame，代码如下所示：

 
  1. UILabel *label = [[UILabel alloc]init];
  2. label.backgroundColor = [UIColor redColor];
  3. CGRect frame = CGRectMake(imageView.bounds.size.width * 0.75, imageView.bounds.size.height * 0.25, 200, 200);
  4. label.frame = frame;
  5. [imageView addSubview:label];

6.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 
  1. #import "TRViewController.h"
  3. @interface TRViewController () <UIGestureRecognizerDelegate>
  4. @property (strong, nonatomic) UIImageView *imageView;
  5. @property (strong, nonatomic) UILabel *frameLabel;
  6. @property (strong, nonatomic) UILabel *boundsLabel;
  7. @end
  9. @implementation TRViewController
  11. - (void)relocation
  12. {
  13. float horizontalScale = self.view.bounds.size.width / self.imageView.bounds.size.width;
  14. float verticalScale = self.view.bounds.size.height / self.imageView.bounds.size.height;
  15. float realScale = horizontalScale < verticalScale ? horizontalScale:verticalScale;
  16. self.imageView.transform = CGAffineTransformMakeScale(realScale, realScale);
  17. }
  19. - (void)trace
  20. {
  21. self.frameLabel.text = [NSString stringWithFormat:@"%.2f, %.2f, %.2f, %.2f", self.imageView.frame.origin.x, self.imageView.frame.origin.y, self.imageView.frame.size.width, self.imageView.frame.size.height];
  22. self.boundsLabel.text = [NSString stringWithFormat:@"%.2f, %.2f, %.2f, %.2f", self.imageView.bounds.origin.x, self.imageView.bounds.origin.y, self.imageView.bounds.size.width, self.imageView.bounds.size.height];
  23. }
  25. - (void)viewDidLoad
  26. {
  27. [super viewDidLoad];
  28. //屏幕上增加两行显示imageView的frame和bounds的Label
  29. UILabel *frameLabel = [[UILabel alloc]init];
  30. self.frameLabel = frameLabel;
  31. frameLabel.frame = CGRectMake(10, 30, 300, 30);
  32. frameLabel.font = [UIFont italicSystemFontOfSize:20];
  33. frameLabel.textColor = [UIColor redColor];
  34. frameLabel.backgroundColor = [UIColor clearColor];
  35. frameLabel.shadowColor = [UIColor greenColor];
  36. frameLabel.shadowOffset = CGSizeMake(1, 1);
  37. frameLabel.text = @"Frame";
  38. [self.view addSubview:frameLabel];
  40. UILabel *boundsLabel = [[UILabel alloc]init];
  41. self.boundsLabel = boundsLabel;
  42. boundsLabel.frame = CGRectMake(10, 70, 300, 30);
  43. boundsLabel.font = [UIFont italicSystemFontOfSize:20];
  44. boundsLabel.textColor = [UIColor redColor];
  45. boundsLabel.backgroundColor = [UIColor clearColor];
  46. boundsLabel.shadowColor = [UIColor greenColor];
  47. boundsLabel.shadowOffset = CGSizeMake(1, 1);
  48. boundsLabel.text = @"Bounds";
  49. [self.view addSubview:boundsLabel];
  50.     UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"Elephant.jpg"]];
  51. self.imageView = imageView;
  52. [self.view insertSubview:imageView atIndex:0];
  53. imageView.center = self.view.center;
  54. [self relocation];
  55. [self trace];
  56. imageView.userInteractionEnabled = YES;//打开用户交互
  57. UIRotationGestureRecognizer *rotationGR = [[UIRotationGestureRecognizer alloc]initWithTarget:self action:@selector(rotate:)];
  58. [imageView addGestureRecognizer:rotationGR];
  59. UIPinchGestureRecognizer *pinchGR = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(pinch:)];
  60. [imageView addGestureRecognizer:pinchGR];
  61. UIPanGestureRecognizer *panGR = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
  62. [imageView addGestureRecognizer:panGR];
  64. //7.
  65. UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
  66. tapGR.numberOfTapsRequired = 2;
  67. [imageView addGestureRecognizer:tapGR];
  68. //8. 让rotation和pinch可以同时被识别
  69. rotationGR.delegate = self;
  70. pinchGR.delegate = self;
  72. //将一个子视图加入到imageView中的右上角75%的位置
  73. UILabel *label = [[UILabel alloc]init];
  74. label.backgroundColor = [UIColor redColor];
  75. CGRect frame = CGRectMake(imageView.bounds.size.width * 0.75, imageView.bounds.size.height * 0.25, 200, 200);
  76. label.frame = frame;
  77. [imageView addSubview:label];
  78. }
  80. - (void)rotate:(UIRotationGestureRecognizer *)gr
  81. {
  82. self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, gr.rotation);
  83. gr.rotation = 0;
  84. [self trace];
  85. }
  87. - (void)pinch:(UIPinchGestureRecognizer *)gr
  88. {
  89. self.imageView.transform = CGAffineTransformScale(self.imageView.transform, gr.scale, gr.scale);
  90. gr.scale = 1;
  91. [self trace];
  92. }
  94. - (void)pan:(UIPanGestureRecognizer *)gr
  95. {
  96. CGPoint p = [gr translationInView:self.imageView];
  97. self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, p.x, p.y);
  98. [gr setTranslation:CGPointZero inView:self.imageView];
  99. [self trace];
  100. }
  102. - (void)tap:(UITapGestureRecognizer *)gr
  103. {
  104. [self relocation];
  106. }
  107. #pragma mark - UIGestureRecognizerDelegate
  108. //两个手势对象是否可以同时识别
  109. - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
  110. {
  111. if ([gestureRecognizer isKindOfClass:[UIRotationGestureRecognizer class] ]&& [otherGestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]]) {
  112. return YES;
  113. }else if([gestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]]&&[otherGestureRecognizer isKindOfClass:[UIRotationGestureRecognizer class]]){
  114. return YES;
  115. }
  116. return NO;
  117. }
  118. @end
 

手势与变形 、 视图与坐标系

原文：http://www.cnblogs.com/52190112cn/p/5049437.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！