首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

touch.js的使用总结

基本事件: touchstart  //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时触发 touchcancel  //触摸过程被系统取消时触发...缩放手势起点 pinchend缩放手势终点 pinch缩放手势 pinchin收缩 pinchout放大 2、旋转 rotateleft向左旋转 rotateright向右旋转 rotate旋转 3、滑动...swipestart滑动手势起点 swiping滑动中 swipeend滑动手势终点 swipeleft向左滑动 swiperight向右滑动 swipeup向上滑动 swipedown向下滑动 swipe...doubletap双击屏幕 三、部分事件处理函数 originEvent触发某事件的原生对象 type事件的名称 rotation旋转角度 scale缩放比例 direction操作的方向属性 fingersCount...                 touchstart 与 touchend之间的时间戳 factor             swipe事件加速度因子 startRotate启动单指旋转方法,在某个元素的

1.8K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    不到30行代码实现一个酷炫H5全景

    ),SphereGeometry(球体)等等 第三步:选择一个观察点,并确定观察方向等:Three中称之为相机(Camera) 第四步:将观察到的场景渲染到屏幕上的指定区域 :Three中使用Renderer...三、全景交互原理 3.1 手势交互之旋转 手势交互之旋转指单指滑动操作,这与滑动地球仪的交互是一致的。...屏幕坐标系,左上角为原点,X轴:由左向右,Y轴:由上到下, 手指在屏幕滑动会依次触发三个事件:touchstart、touchmove和touchend;event对象中记录了手指屏幕的位置 ?...上面的代码已经加上全景的单指交互,但是,缺少了旋转惯性。...这时候我们需要双指交互,同计算,开始触摸计算第一次双指的距离,在双指移动中不断计算双指距离,与上一次距离相除即为缩放倍数。

    2.4K40

    探究 css touch-action 属性

    See 这样的bug 然后找了一通发现可以用 *{touch-action:none}这个方法 用法是禁用元素(及其不可滚动的后代)上的所有手势,以使用自己提供的拖放和缩放行为(如地图或游戏表面...使用 Pointer_events 的应用程序将在浏览器开始处理触摸手势时收到一个 pointercancel 事件。...这意味着在实践中,触摸动作通常仅适用于具有某些自定义行为的单个元素,而无需在该元素的任何后代上明确指定触摸动作。 手势开始之后,触摸动作值的更改将不会对当前手势的行为产生任何影响。...可以与 pan-y 、pan-up、pan-down 和/或 pinch-zoom 组合使用 pan-y 启用单指垂直平移手势。...示例 最常见的用法是禁用元素(及其不可滚动的后代)上的所有手势,以使用自己提供的拖放和缩放行为(如地图或游戏表面) #map { touch-action: none; } 另一种常见的模式是使用指针事件处理水平平移的图像轮播

    1.8K10

    Android高德之旅(3)UI Setting

    地图的触摸事件很丰富,有单击、双击、单指拖拽、双指拖拽、双指旋转、双指缩放等,高德提供了api来设置这些用户交互,还包含地图截图,这也算是用户交互。...获取出来的这个scale单位是米/像素,也就是屏幕上一像素等于实际多少米 触控设置 1、滑动手势:是否可以单指滑动 mUiSettings.setScrollGesturesEnabled(false)...(false); 4、旋转手势:是否可以双指旋转 mUiSettings.setRotateGesturesEnabled(false); 5、所有手势开关 mUiSettings.setAllGesturesEnabled...两个api传入的参数都是CameraUpdate对象,表示更新相机位置(即视角位置) CameraUpdateFactory.newCameraPosition()方法就是返回一个CameraUpdate...子类对象 参数分别表示:新的经纬度、缩放级别、视角倾斜角度、地图旋转角度 我们再来看下效果: ?

    1.6K30

    jimojianghu

    js 处理 使用js代码来禁止触摸屏的手指缩放,和处理触控板类似的,这里主要是监听几个手势事件,touchstart, touchend, touchmove等。...pan-x 启用单指水平平移手势。可以与 pan-y 、pan-up、pan-down 和/或 pinch-zoom 组合使用。 pan-y 启用单指垂直平移手势。...pan-left, pan-right,pan-up,pan-down 启用以指定方向滚动开始的单指手势。 一旦滚动开始,方向可能仍然相反。 多个方向可以组合。...但需要注意滚轮默认事件,如会导致子元素滚动失效,这时候就要在子元素上阻止相同事件冒泡。...由于目标被视为被动,因此无法在被动事件侦听器中阻止默认行为。 可能的发生情景:移动端使用touch事件后,垂直平移时的报错。

    3.8K00

    移植一个抖音贴纸组件到Flutter

    这样一来子类也可以对手势进行扩展,例如按住某个地方单指缩放等等。...7.我图中 ECWS 也实现了一个子类 DECWS,这个类简单的加两个手势: 1.单指移动缩放:类似抖音的随拍,按住元素的右下角的时候可以用拖动来对元素进行缩放和旋转。...(2).元素单指手势 元素手势不像添加元素那样需要外部调用,元素手势是通过事件分发触发的,我们这里不讲 Flutter 的事件分发机制,只讲我们基于其上的逻辑。...1.对于元素单指手势的处理,主要看三个触摸事件:down、move、up。所以我们直接看 ECWS.build 中设置的三个回调方法。...5.事件不可截断的特性在开发中最有用的地方就是:如果我们使用 tapUp,tapDown,这类手势想要监听手指的抬起和放下,那么这些手势可能会被其他手势给冲掉。

    1.4K20

    UIGestureRecognizer  手势识别一、概念介绍二、UIView 的分类三、UIGestureRecognizer 抽象类四、UIGestureRecognizerDelegate 代理

    UIPinchGestureRecognizer(捏合手势,缩放用) 使用步骤: (1)创建手势识别对象 (2)设置手势识别属性,例如手指数量,方向等 (3)将手势识别附加到指定的视图之上...(但可能已经触发了触摸事件),默认状态 UIGestureRecognizerStateBegan 手势已经开始,此时已经被识别,但是这个过程中可能发生变化,手势操作尚未完成 UIGestureRecognizerStateChanged...如果设置为YES,手势识别器在识别的过程中(注意是识别过程),不会将触摸发给触摸到的控件,即控件不会有任何触摸事件。...:(nullable SEL)action; 4、指定一个手势需要另一个手势执行失败才会执行,同时触发多个手势使用其中一个手势的解决办法 有时手势是相关联的,如单机和双击,点击和长按,点下去瞬间可能只会识别到单击无法识别其他...= 3; // 设置能识别到手势的最少的手指的个数 tap.numberOfTouchesRequired = 2; //把手势对象添加到对应的控件中 [self.imgView addGestureRecognizer

    3.1K81

    Mouse Gestures on Windows Mobile

    众所周知,在PC机上使用的软件,如遨游(Maxthon),是支持鼠标手势的。我觉得,这在很大程度上,丰富了用户的使用体验。可惜,在windows mobile设备上,我没有碰到过类似的体验。...再到后来,出来新的网页浏览器UCWEB,也支持鼠标手势,简化了很多触笔点击菜单的操作,极大地丰富了用户的使用感受。 说到这里,不得不说说Windows Mobile版本和触摸屏的关系。...从传统来看,Smartphone使用数字键盘操作、不具备触摸屏,而 Pocket PC Phone则是不具备键盘,依靠触摸屏来操作。...那么,我们如何在Windows Mobile设备上实现鼠标手势(Mouse Gesture)呢?...顺时针旋转”、“逆时针旋转”、“保存”和“退出”等等。

    1.4K100

    iOS_38_手势

    3大类:触摸、加速计、远程遥控 仅仅有响应者的子类,才干够接收和处理事件 父类响应者中定义的事件处理接口例如以下: 触摸事件处理的四个方法例如以下:(仅仅要实现,系统会自己主动调用)...一个UITouch对象,代表着一根手指,手指移动,UITouch对象实时更新 一个UITouch对象,相应一根手指,记录着触摸时的全部信息 重要~常常使用UITouch的方法,取得触摸时的信息...(如位置、所点对象) 事件对象UIEvent,经常使用的属性是:事件类型 触摸的四个方法(即过程)具体解释:注意同一时候和一前一后触摸的情况 必须先找到事件的最合适的响应者(从父到子地找...pinch];}// 2.加入 旋转手势- (void)addRotate{ // 1.创建Rotation手势识别器对象,同一时候绑定监听方法(识别到了相应的手势,就会调用监听方法) UIRotationGestureRecognizer...// 旋转手势- (void)rotating:(UIRotationGestureRecognizer *)rotate{ // 按手势识别器 的旋转角度进行旋转 rotate.view.transform

    93320

    Unity 移动端触摸屏操作

    Unity 触屏操作 当将Unity游戏运行到IOS或Android设备上时,桌面系统的鼠标左键可以自动变为手机屏幕上的触屏操作,但如多点触屏等操作却是无法利用鼠标操作进行的。...Unity的Input类中不仅包含桌面系统的各种输入功能,也包含了针对移动设备触屏操作的各种功能,下面介绍一下Input类在触碰操作上的使用。...,原因如把设备放在脸上或同时超过5个触摸点 下面通过一段代码来进行移动设备触摸操作的实现: using UnityEngine; using System.Collections; public...用于判断是否放大 bool isEnlarge(Vector2 oP1, Vector2 oP2, Vector2 nP1, Vector2 nP2) { //函数传入上一次触摸两点的位置与本次触摸两点的位置计算出用户的手势...- nP2.x) + (nP1.y - nP2.y) * (nP1.y - nP2.y)); if (leng1 < leng2) { //放大手势

    3.1K20

    iOS中手势的应用1. 四类事件的主要方法2. 响应者链3. 手势识别功能(Gesture Recognizer)4. 手势的使用

    触摸事件.png 但是在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件。我们称之为“响应者对象”。...这里是比较理论化的知识,是比较考验我们对于iOS中触摸事件的理解深度的。这里我就只是用简单的方式,写一下自己对于这部分的理解。 根据第一部分的内容,知道UIResponder有好多好多。...如果想判定一个响应对象是否是第一响应者,则可以使用以下方法: (BOOL)isFirstResponder 如果我们希望将一个响应对象作为第一响应者,则可以使用以下方法: (BOOL)becomeFirstResponder...方法监听view触摸事件,有很明显的几个缺点 必须得自定义view 由于是在view内部的touches方法中监听触摸事件,因此默认情况下,无法让其他外界对象监听view的触摸事件 不容易区分用户的具体手势行为...的使用步骤如下: //创建手势识别器对象 UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] init]; //设置手势识别器对象的具体属性

    2.3K40

    iOS开发中的手势体系——UIGestureRecognizer分析及其子类的使用

    iOS开发中的手势体系——UIGestureRecognizer分析及其子类的使用 一、引言         在iOS系统中,手势是进行用户交互的重要方式,通过UIGestureRecognizer类,...我们可以轻松的创建出各种手势应用于app中。...关于UIGestureRecognizer类,是对iOS中的事件传递机制面向应用的封装,将手势消息的传递抽象为了对象。...二、手势的抽象类——UIGestureRecognizer         UIGestureRecognizer将一些和手势操作相关的方法抽象了出来,但它本身并不实现什么手势,因此,在开发中,我们一般不会直接使用...UIGestureRecognizer的对象,而是通过其子类进行实例化,iOS系统给我们提供了许多用于我们实例的子类,这些我们后面再说,我们先来看一下,UIGestureRecognizer中抽象出了哪些方法

    2K20

    iOS-手势UIGestureRecognier详解一. 手势UIGestureRecognier简介二. 手势的抽象类——UIGestureRecognizer三. UIGestureRecogni

    UIGestureRecognizer是一个抽象类,对iOS中的事件传递机制面向应用进行封装,将手势消息的传递抽象为了对象。其中定义了所有手势的基本行为,使用它的子类才能处理具体的手势。 二....手势的抽象类——UIGestureRecognizer UIGestureRecognizer将一些和手势操作相关的方法抽象了出来,但它本身并不实现什么手势,因此,在开发中,我们一般不会直接使用UIGestureRecognizer...的对象,而是通过其子类进行实例化,iOS系统给我们提供了许多用于实例的子类,这些我们后面再说,我们先来看一下,UIGestureRecognizer中抽象出了哪些方法。...,如果设置为NO,touch事件传递的方法仍然会被执行,上例中我们使用了拖拽手势和touchesMoved两个触发方式,当我们把cancelTouchesInView设置为NO时,在屏幕上滑动,两种方式都在触发...旋转手势——UIRotationGestureRecognizer 进行旋转动作时触发手势方法。

    2.6K50

    如何响应用户交互事件

    指针事件 指针事件表示用户交互的原始触摸数据,如手指接触屏幕 PointerDownEvent、手指在屏幕上移动 PointerMoveEvent、手指抬起 PointerUpEvent,以及触摸取消...通常情况下,响应用户交互行为的话,我们会使用封装了手势语义操作的Gesture,如点击 onTap、双击 onDoubleTap、长按 onLongPress、拖拽 onPanUpdate、缩放 onScaleUpdate...工厂类的初始化采用 GestureRecognizerFactoryWithHandlers函数完成,这个函数提供了手势识别对象创建,以及对应的初始化入口。...最后,我们介绍了Gesture的事件处理机制:在Flutter中,尽管我们可以对一个Widget监听多个手势,或者对多个Widget监听同一个手势,但Flutter会使用手势竞技场来进行各个手势的PK,...在处理多个手势识别场景时,很容易出现手势冲突的问题。比如,当需要对图片进行点击、长按、旋转、缩放、拖动等操作的时候,如何识别用户当前是点击还是长按,是旋转还是缩放。

    2.2K10
    领券