几种手势操作的最基本实现

工作太忙,有点懒,直接上代码了。


#import "ViewController.h"


@interface ViewController ()


@end


@implementation ViewController


/*

 UITapGestureRecognizer         Tap(点击)

 UIPinchGestureRecognizer       Pinch(捏合)

 UIRotationGestureRecognizer    Rotation(旋转)

 UISwipeGestureRecognizer       Swipe(滑动,快速移动,是用于监测滑动的方向的)

 UIPanGestureRecognizer         Pan (拖移,慢速移动,是用于监测偏移的量的)

 UILongPressGestureRecognizer   LongPress(长按)

 */


- (void)viewDidLoad

{

    [super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

    

    UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];

    [btn setFrame:CGRectMake(50, 50, 100, 100)];

    [btn setBackgroundImage:[UIImage imageNamed:@"1.png"] forState:UIControlStateNormal];

    // 拖移的 Recognizer

    UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc]initWithTarget:self                                               action:@selector(handlePan:)];

    [btn addGestureRecognizer:panGestureRecognizer];

    

    

    UIView *tapView = [[UIView alloc] initWithFrame:CGRectMake(10, 50, 300, 300)];

    [tapView setBackgroundColor:[UIColor redColor]];

    // 单击的 Recognizer

    UITapGestureRecognizer* singleRecognizer;

    singleRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(SingleTap:)];

    //点击的次数

    singleRecognizer.numberOfTapsRequired = 1; // 单击

    //点击的手指数

    singleRecognizer.numberOfTouchesRequired = 2;

    

    //view添加一个手势监测;

    [tapView addGestureRecognizer:singleRecognizer];

    

    

    // 双击的 Recognizer

    UITapGestureRecognizer* doubleRecognizer;

    doubleRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(DoubleTap:)];

    doubleRecognizer.numberOfTapsRequired = 2; // 双击

    //关键语句,给self.view添加一个手势监测;

    [tapView addGestureRecognizer:doubleRecognizer];

    

    // 关键在这一行,双击手势确定监测失败才会触发单击手势的相应操作

    [singleRecognizer requireGestureRecognizerToFail:doubleRecognizer];

    

    // 捏合的 Recognizer

    UIPinchGestureRecognizer *pinchGestureRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinch:)];

    [tapView addGestureRecognizer:pinchGestureRecognizer];

    

    // 旋转的 Recognizer

    UIRotationGestureRecognizer *rotateRecognizer = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(handleRotate:)];

    [tapView addGestureRecognizer:rotateRecognizer];

    

    // 长按的 Recognizer

    UILongPressGestureRecognizer *longPressRecognizer = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handleLongPress:)];

    //设置长按时间间隔

    [longPressRecognizer setMinimumPressDuration:1.0];

    [tapView addGestureRecognizer:longPressRecognizer];

    

    // 滑动的 Recognizer

    UISwipeGestureRecognizer *swipeRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];

    //设置滑动方向

    [swipeRecognizer setDirection:UISwipeGestureRecognizerDirectionDown];

    [tapView addGestureRecognizer:swipeRecognizer];

    

    

    [self.view addSubview:tapView];

    [self.view addSubview:btn];

}


- (void)handlePan:(UIPanGestureRecognizer*) recognizer

{

    NSLog(@"拖移,慢速移动");

    CGPoint translation = [recognizer translationInView:self.view];

    recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x, recognizer.view.center.y + translation.y);

    [recognizer setTranslation:CGPointZero inView:self.view];

}


-(void)SingleTap:(UITapGestureRecognizer*)recognizer

{

    //处理单击操作

    NSLog(@"单击");

}


-(void)DoubleTap:(UITapGestureRecognizer*)recognizer

{

    //处理双击操作

    NSLog(@"双击");

    

}


- (void) handlePinch:(UIPinchGestureRecognizer*) recognizer

{

    NSLog(@"捏合, %f", recognizer.scale);

    recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, recognizer.scale);

    recognizer.scale = 1;

}


- (void) handleRotate:(UIRotationGestureRecognizer*) recognizer

{

    NSLog(@"旋转, %f", recognizer.rotation);

    recognizer.view.transform = CGAffineTransformRotate(recognizer.view.transform, recognizer.rotation);

    recognizer.rotation = 0;

}


-(void)handleLongPress:(UILongPressGestureRecognizer*)recognizer

{

    //处理长按操作

    NSLog(@"长按, %f", recognizer.minimumPressDuration);

}


-(void)handleSwipe:(UISwipeGestureRecognizer*)recognizer

{

    //处理滑动操作

    NSLog(@"滑动,快速移动");

    CGPoint translation = [recognizer locationInView:self.view];

    NSLog(@"Swipe - start location: %f,%f", translation.x, translation.y);

    //    recognizer.view.transform = CGAffineTransformMakeTranslation(translation.x, translation.y);

}





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: PDF.js 是一个用于在浏览器中显示 PDF 文件的 JavaScript 库。它提供了一种简单、快速和易于使用的方法来展示并与 PDF 文档进行交互。 要实现手势缩放,在 PDF.js 中有几个步骤需要遵循: 1. 监听 touchstart、touchmove 和 touchend 事件,以跟踪用户手势操作。 2. 在 touchstart 事件中记录触摸点的起始位置。 3. 在 touchmove 事件中计算触摸点的移动距离,并基于移动的距离来改变 PDF 页面的缩放级别。 4. 在 touchend 事件中清除触摸点的起始位置和移动距离。 以下是一个简单的示例代码,用于实现手势缩放功能: ```javascript var touchStartX, touchStartY, touchMoveX, touchMoveY; var scale = 1; // 监听 touchstart 事件,记录触摸点的起始位置 document.addEventListener('touchstart', function(event) { var touch = event.touches[0]; touchStartX = touch.clientX; touchStartY = touch.clientY; }); // 监听 touchmove 事件,计算触摸点的移动距离并改变缩放级别 document.addEventListener('touchmove', function(event) { var touch = event.touches[0]; touchMoveX = touch.clientX; touchMoveY = touch.clientY; // 计算移动距离 var deltaX = touchMoveX - touchStartX; var deltaY = touchMoveY - touchStartY; // 根据移动距离计算缩放比例 var deltaDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY); var newScale = scale + (deltaDistance / 1000); // 根据具体情况调整缩放速度 // 应用新的缩放级别 if (newScale > 0.5 && newScale < 5) { // 设置缩放的最大和最小限制 scale = newScale; document.getElementById('pdfContainer').style.transform = 'scale(' + scale + ')'; } }); // 监听 touchend 事件,清除触摸点的起始位置和移动距离 document.addEventListener('touchend', function() { touchStartX = null; touchStartY = null; touchMoveX = null; touchMoveY = null; }); ``` 在上面的示例代码中,我们可以看到监听了 touchstart、touchmove 和 touchend 事件,并在对应的事件处理程序中进行相应的操作。通过计算触摸点的移动距离,并基于移动的距离来改变 PDF 页面的缩放级别,从而实现手势缩放的效果。注意在实际应用中,你需要将上述代码与 PDF.js 相关的代码进行整合,以便在正确的地方应用缩放效果。 ### 回答2: PDF.js是一个基于JavaScript的开源PDF文档渲染器,它可以在现代浏览器中显示PDF文件。要实现手势缩放功能,需要按照以下步骤进行操作: 1. 获取PDF.js渲染容器的DOM元素,通常通过指定一个id或类名来获取。 2. 绑定触摸事件,监听用户的手势操作。 3. 在触摸开始事件中,获取用户的初始手指位置和当前缩放比例。 4. 在触摸移动事件中,根据手指的位置差异计算缩放差值,并更新当前缩放比例。 5. 将计算得到的缩放差值应用到PDF.js渲染容器上,实现缩放效果。 6. 在触摸结束事件中,清除手指位置和缩放比例等数据。 以下是一个简单实现手势缩放功能的例子: ```html <!DOCTYPE html> <html> <head> <title>PDF.js手势缩放示例</title> <style> #pdfContainer { width: 100%; height: 500px; } </style> </head> <body> <div id="pdfContainer"></div> <script src="pdfjs-dist/build/pdf.js"></script> <script> const container = document.getElementById('pdfContainer'); const scaleStep = 0.1; let initialScale = 1; let initialTouchDistance; function handleTouchStart(event) { if (event.touches.length === 2) { initialTouchDistance = Math.hypot( event.touches[0].pageX - event.touches[1].pageX, event.touches[0].pageY - event.touches[1].pageY, ); initialScale = container.style.transform ? parseFloat(container.style.transform.split(' ')[1]) : 1; } } function handleTouchMove(event) { if (initialTouchDistance && event.touches.length === 2) { const newTouchDistance = Math.hypot( event.touches[0].pageX - event.touches[1].pageX, event.touches[0].pageY - event.touches[1].pageY, ); const scaleDiff = (newTouchDistance - initialTouchDistance) * scaleStep; const newScale = initialScale + scaleDiff; container.style.transform = `scale(${newScale})`; container.style.transformOrigin = 'center'; } } function handleTouchEnd(event) { initialTouchDistance = null; } container.addEventListener('touchstart', handleTouchStart); container.addEventListener('touchmove', handleTouchMove); container.addEventListener('touchend', handleTouchEnd); </script> </body> </html> ``` 在上述示例中,我们通过监听触摸事件来实现手势缩放功能。 在触摸开始事件中,我们获取了初始手指位置和当前缩放比例,保存在变量`initialTouchDistance`和`initialScale`中。 在触摸移动事件中,我们计算出新的手指位置差异,通过乘以缩放步长得到缩放差值,并根据初始缩放比例计算出新的缩放比例。 最后,将新的缩放比例应用到PDF.js渲染容器上,实现手势缩放的效果。 在触摸结束事件中,我们清除了初始手指位置和缩放比例等数据,以便下一次手势操作的准备。 需要注意的是,以上示例仅演示了手势缩放操作基本原理,具体在使用PDF.js的相关API时,可能需要进行适当的修改。 ### 回答3: pdf.js是一个用于在网页上显示PDF文件的JavaScript库。它提供了许多功能,包括手势缩放。 实现手势缩放的关键是处理用户的触摸事件。pdf.js使用了浏览器提供的Touch事件来实现手势缩放。以下是实现手势缩放的基本步骤: 1. 获取PDF页面的容器元素。在页面上,我们必须有一个用于显示PDF页面的容器元素。通过使用JavaScript代码获取该容器元素。 2. 监听触摸事件。使用`touchstart`、`touchmove`和`touchend`等触摸事件来监听用户的触摸行为。我们可以使用`addEventListener`方法来为这些事件绑定处理函数。 3. 计算手势缩放比例。在`touchmove`事件处理函数中,根据用户的手势移动距离计算缩放比例。我们可以使用`event.touches`来获取触摸点的信息,并根据触摸点的坐标来计算手势缩放比例。 4. 对PDF页面应用缩放。根据计算得到的缩放比例,使用CSS的`transform`属性对PDF页面进行缩放操作。我们可以通过修改容器元素的样式来实现这一目的。 5. 可选的,限制缩放范围。为了防止过大或过小的缩放,我们可以在计算得到的缩放比例上应用一些限制条件。例如,我们可以设置一个最小和最大缩放比例,并在应用缩放之前检查计算得到的比例是否超过这些限制。 通过以上步骤,我们可以实现在pdf.js中的手势缩放功能。但需要注意的是,以上仅为一个基本的示例,实际应用中可能还涉及到更复杂的逻辑和处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值