手势图的设计原理(2)拖拽、捏合、轻扫、旋转

ViewController.m

#import "ViewController.h"

@interface ViewController ()
{
    UIImageView *imageView;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
   
    imageView = [[UIImageView alloc]initWithFrame:CGRectMake(200, 200, 200, 200)];
    imageView.image = [UIImage imageNamed:@"涂涂.jpg"];
    [self.view addSubview:imageView];
    /*
    手势又分为六大手势:
    六大手势  全部都继承自  UIGestureRecognizer
    1、点击 UITapGestureRecognizer
    2、长按 UILongPressGestureRecognizer
    3、拖拽 UIPanGestureRecognizer
    4、捏合 UIPinchGestureRecognizer
    5、轻扫 UISwipeGestureRecognizer
    6、旋转 UIRotationGestureRecognizer
    
     //UIGestureRecognizer
     //初始化手势
     //- (instancetype)initWithTarget:(nullable id)target action:(nullable SEL)action;
     //UIView 中有添加手势的方法
     //addGestureRecognizer:
     [xx addGestureRecognizer: xx];
    */
#pragma mark---------拖拽---------------------------
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
    //设置最小的手指个数
    pan.minimumNumberOfTouches = 1;
    //设置最大的手指个数
    pan.maximumNumberOfTouches = 2;
    [self.view addGestureRecognizer:pan];
   
   
#pragma mark---------轻扫---------------------------
    UISwipeGestureRecognizer *swipe = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipe:)];
    swipe.numberOfTouchesRequired = 1;
   
    //设置轻扫的方向
    /*
    
     UISwipeGestureRecognizerDirectionRight
     UISwipeGestureRecognizerDirectionLeft
     UISwipeGestureRecognizerDirectionUp
     UISwipeGestureRecognizerDirectionDown
    
     */
   
    //让轻扫的方向是右
    swipe.direction = UISwipeGestureRecognizerDirectionRight;
    [self.view addGestureRecognizer:swipe];
        //不能响应 手势冲突
    //等一个手势结束之后再去响应另外一个手势
    //等轻扫(swipe)响应之后再去响应拖拽(pan)
    [pan requireGestureRecognizerToFail:swipe];
   
    //让轻扫的方向是左
    UISwipeGestureRecognizer *left = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipe:)];
    left.direction = UISwipeGestureRecognizerDirectionLeft;
    [self.view addGestureRecognizer:left];
    [pan requireGestureRecognizerToFail:left];
   
#pragma mark---------捏合---------------------------
    UIPinchGestureRecognizer *pinch = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(pinch:)];
    [self.view addGestureRecognizer:pinch];
   
#pragma mark---------旋转---------------------------
    UIRotationGestureRecognizer *rotation = [[UIRotationGestureRecognizer alloc]initWithTarget:self action:@selector(rotation:)];
    [self.view addGestureRecognizer:rotation];
}

//旋转
-(void)rotation:(UIRotationGestureRecognizer *)sender
{
    //获得手势的旋转角度,让imageView按照这个角度去变化
    imageView.transform = CGAffineTransformMakeRotation(sender.rotation);

}

//捏合
-(void)pinch:(UIPinchGestureRecognizer *)sender
{
    //是一个视图变形,transform是UIView里面的一个属性,可是使视图发生形态上的改变,变形之后的视图,做其他操作不会还原原来的形态,除非用transfrom里面的还原视图方法
   
    //@property(nonatomic) CGAffineTransform transform;   // default is CGAffineTransformIdentity. animatable
    //    CGAffineTransform 让视图变形的类
    //    CGAffineTransformMakeScale(<#CGFloat sx#>, <#CGFloat sy#>)  让视图按照一个比例去变化 -> 放大缩小
    //    CGAffineTransformMakeRotation(<#CGFloat angle#>) 让视图 按照一个弧度去变化 -> 用于旋转
    //    CGAffineTransformIdentity -> 还原之前改变的所有形态

imageView.transform = CGAffineTransformMakeScale(sender.scale, sender.scale);
}

//轻扫
-(void)swipe:(UISwipeGestureRecognizer *)sender
{
//    CGFloat x;
//    if (sender.direction == UISwipeGestureRecognizerDirectionLeft) {
//        x = 0.0;
//    }else{
//        x = 200.0;
//    }
    CGFloat x = sender.direction == UISwipeGestureRecognizerDirectionLeft?0:200;
   
    [UIView animateWithDuration:0.7 animations:^{
        self.view.frame = CGRectMake(x, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame));
        UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(30, 50, 60, 40)];
        [button  setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
        [self.view addSubview:button];
    }];

}

//拖拽
-(void)pan:(UIPanGestureRecognizer *)sender
{
    //让视图还原成初始样式
    imageView.transform = CGAffineTransformIdentity;
//    CGPoint point = [sender translationInView:self.view];
//    NSLog(@"x:%f y:%f",point.x,point.y);
    //point 点击位置是(0,0)平移之后向左减少,向上减少,可以获得的方向和位置translationInView:
   
    //获得拖动的中心点
    CGPoint panCenter = [sender locationInView:self.view];
    imageView.center = panCenter;

}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

时间: 2024-11-06 21:41:18

手势图的设计原理(2)拖拽、捏合、轻扫、旋转的相关文章

手势图的设计原理(1)

ViewController.m /* 手势: UIResponder:是一个响应者(传达者) 用来响应 用户触摸屏幕的某些事件 // 手指开始触摸屏幕调用 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event; 时间戳 点击次数 可以获得点击视图的位置******* - (CGPoint)locationInView:(nullable UIView *)view;  // 手

IOS 手势学习(点击,长按,轻扫,拖拽,旋转,捏合缩放)

点击        UITapGestureRecognizer 长按        UILongPressGestureRecognizer 轻扫        UISwipeGestureRecognizer 拖拽        UIPanGestureRecognizer 旋转        UIRotationGestureRecognizer 捏合缩放 UIPinchGestureRecognizer 详细代码如下: #import "ViewController.h" @i

微信小程序的拖拽、缩放和旋转手势

在开发中,有时会遇到像App中的手势那样的效果,下面就仿照App实现了一下. wxml部分: <view class="touch-container"> <view class="msg">{{msg}}</view> <image class="img" src="{{src}}" style="width: {{width}}rpx; height: {{height}

JS拖拽元素原理及实现代码

拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的.下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一.拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开 二.拖拽流程中对应的JS事件①鼠标按下会触发onmousedown事件 [javascript] view plain copy obj.onmousedown = function(e) { //.......... } ②鼠标移动会触发onmousemove事件 [javascript] vie

最近写的一个控件——Well Swipe 拖拽排序实现

如图: >删除过渡动画 >拖拽排序

JS事件中级 --- 拖拽

http://bbs.zhinengshe.com/thread-1200-1-1.html 要求:实现div块的拖拽 原理:拖拽过程中鼠标点和div块的相对位置保持不变. 需要理解三点: 1. 为什么要把onmousemove,onmouseup加在document上面 ? 2. onmouseup要怎么使用 ? 3. 如何防止div块跑出边界 ? 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 &l

图片上传,图片旋转,拖拽

能够支持IE,谷歌,火狐浏览器(兼容多浏览器不容易啊) 下面仅提供核心思想和部分代码:  拖拽:是使用网上现成的JS代码,在此基础上进行适当的修改即可满足自己的需求,最主要的就是判定拖拽的范围,上传的图片不能给拖没了,所以加上个范围限定,判断超出了这个范围便拖拽无效果. 旋转与缩放要区分浏览器.. 旋转:IE浏览器下想要实现图片的旋转很简单只要调用IE提供的滤镜filter参数为一个旋转矩阵即可.谷歌和火狐浏览器图片显示用的是canvas标签而不是img标签所以图片的旋转需要用canvas标签相

iOS开发UI篇—手势识别器(长按+轻扫)

iOS开发UI篇—手势识别器(长按+轻扫) 一.长按事件 1 // 2 // YYViewController.m 3 // 03-长按 4 // 5 // Created by apple on 14-6-19. 6 // Copyright (c) 2014年 itcase. All rights reserved. 7 // 8 9 #import "YYViewController.h" 10 11 @interface YYViewController () 12 @prop

android项目 之 记事本(14) ----- 手势缩放与拖拽图片

本文是自己学习所做笔记,欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 上节实现了查看图片及录音的功能,其中查看图片,可以调用系统的图库来查看图片,也可以自定义Activity来查看图片,今天就在上节的基础上,实现手势缩放与拖拽图片. 想必大家都用过系统的图库,浏览图片时,可以通过手势放大或缩小图片,旋转图片,拖拽图片等功能,我们也为自已定义的查看图片的Activity增加手势缩放与拖拽图片的功能,效果如下图: 上面四幅图中,演示了通过手势(多点触