this.touchVector.x = vector.x;  

        this.touchVector.y = vector.y;  

      } 

   ...  

} 

【编辑推荐】

1. html5 app轻架构高机能开辟交换会即将在京举办
2. HTML5游戏引擎深度测评
3. 基于LeanCloud和Wex5开辟跨平台HTML5应用法度榜样
4. HTML5 – 本地存储
5. 挨踢部落直播教室第二期：移动互联网产品中若何用好HTML5？

【义务编辑：未丽燕 TEL：（010）68476606】

拭魅战

好了，我们的手势体系到这里就完成了。接下来要在拭魅战中考验这套体系是否靠得住，做一个简单的图片浏览器，支撑图片缩放，扭转，移动，长按。

起首，做好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  
    });  
  } 

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

　　推荐阅读

　　还可以这么玩：盘点iOS 11中Siri的12项新功能

Siri有了更多的新机能，经由过程分享社交账号QR码获得更活泼的形象，以及它可以吹奏DJ。以下是对iOS 11中Siri的所有操作方法的总结：1.跨设备同步经由过程iOS 11体系，Siri可以总结并适应>>>详细阅读

本文标题：HTML5手势检测原理和实现

地址：http://www.17bianji.com/lsqh/37633.html

 1/2    1