HTML5 手势检测原理和实现

　　好了，我们的手势系统到这里就完成了。接下来要在实战中检验这套系统是否可靠，做一个简单的图片浏览器，支持图片缩放，旋转，移动，长按。

　　首先，做好DOM规划，和“之前”一样，我们的事件监听机制并不直接作用在图片上，而是作用在图片的父元素上。

　　然后，可以开始使用上面的手势检测系统了。

render() {

    return (

      <Gestures onPinch={this.onPinch} onMove={this.onMove} onRotate={this.onRotate} onDoubleTap={this.onDoubleTap} onLongPress={this.onLongPress}>

        <div className="wrapper" >

          ![](http://upload-images.jianshu.io/upload_images/2362670-f8b44d4b9101e8d6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

        div>

      Gestures>

    );

  }

　　由于我们的手势系统检测的增量，因此不能直接把增量应用在对象上，而是需要把这些增量累加。以旋转为例：

onRotate(event) {

    //对增量进行累加

    this.angle += event.angle

    this.setState({

      angle:this.angle

    });

  }

　　至此，我们的手势检测就完成了。

源码：https://github.com/eeandrew/gestures

在线Demo: http://eeandrew.github.io/demos/gestures/index.html

原文链接：http://www.codeceo.com/article/html5-gesture-detection.html

原文作者：周林