js鼠标手势,交互设计手势

　　IE10中新增了对高级用户输入的识别支持。比如注册一个点击操作，就可以知道当前用户的点击是哪个设备，是手指点击、鼠标点击还是手写笔点击(所有平板设备都有手写笔)。

　　canvasid= my canvas /canvas script

　　my canvas . addevent listener( mspointer down ，MyBack，false)；functionMyBack(e){

　　alert(e . pointer type . tostring())；

　　}/script上面的代码能够识别出当前用户点击的是哪个设备，e.pointerType也通过回调方法做出判断。鼠标是4，手写笔是3，手指是2。至于1的值是什么样的设备，还有待研究。

　　另外需要注意的是，你要在javascript中添加输入设备的标识，注册的方法事件略有不同。

　　addEventListener添加的事件是MSPointerDown。

　　但在IE10中，在不影响正常功能的前提下，在识别这类多台设备时优先处理手指点击。不过IE10不仅可以识别用户的输入设备，还支持很多高级手势。

　　以下是IE10高级手势支持的演示。

　　创建手势对象

　　在你的网站中处理手势的第一步是实例化手势对象。

　　var my gesture=new ms gesture()；

　　接下来，为手势提供一个目标元素。浏览器将为此元素触发一个手势事件。同时，这个元素也可以决定事件的坐标空间。

　　elm=document . getelementbyid( some element )；

　　myGesture.target=elm

　　elm . addevent listener( MSGestureChange ，handle gesture)；

　　最后，手势对象被告知在手势识别期间要处理哪些指针。

　　elm . addevent listener( MSPointerDown ，function (evt) {

　　//为手势识别添加当前鼠标、笔或触摸触点

　　my gesture . add pointer(evt . pointerid)；

　　});

　　注意：请不要忘记，您需要使用ms-ms-touch-action来配置元素，以防止它们执行默认的触摸操作(例如，平移和缩放)，并为输入提供指针事件。

　　处理手势事件一旦手势对象有了有效的目标，并且至少添加了一个指针，它就会开始触发手势事件。手势可分为两种：静态手势(例如，点击或按住)和动态手势(例如，捏、旋转和滑动)。

　　点击是最基本的手势识别。当检测到单击时，将在手势对象的目标元素上触发MSGestureTap事件。与单击事件不同，单击手势只能在用户触摸、按下鼠标按钮或用手写笔触摸而不移动时触发。如果您想区分用户单击和拖动元素，这通常非常有用。

　　长按手势是指用户用一个手指触摸屏幕，保持一会儿，抬起来不动的操作。在长按交互过程中，对于各种手势状态，会多次触发MSGestureHold事件：复制代码如下：

　　element . addevent listener( MSGestureHold ，handle hold)；

　　功能手柄保持(evt) {

　　if (evt.detail evt。MSGESTURE_FLAG_BEGIN) {

　　//Begin表示手势的开始。对于保持手势，这意味着用户已经在某个位置保持了足够长的时间，如果手指抬起，手势将变成完全的按住。

　　}

　　if (evt.detail evt。MSGESTURE_FLAG_END) {

　　//End表示手势的结束。

　　}

　　if (evt.detail evt。MSGESTURE_FLAG_CANCEL) {

　　//Cancel表示用户开始了笔势，但取消了它。对于保持，这发生在用户在提起之前拖动时。该标志与结束标志一起发送，表示手势识别完成。

　　}

　　}

　　动态手势(挤压、旋转、滑动和拖动)

　　动态手势(例如，收缩或旋转)将以转换的形式报告，这与CSS 2D转换非常相似。动态手势可以触发三种事件：MSGestureStart、MSGestureChange(随着手势的继续重复触发)和MSGestureEnd。每个事件都包含缩放(收缩)、旋转、转换和速度等相关信息。

　　由于动态手势以转换的形式报告，因此使用包含CSS 2D转换的女士手势来操作诸如照片或拼图等元素将变得十分轻松。例如，您可以通过下列方式启用缩放、旋转和拖动元素的操作：复制代码代码如下：

　　目标元素。addevent侦听器( MSGestureChange ，操纵元素)；

　　功能操作元件(e) {

　　//如果要禁用动态手势识别提供的内置惯性，请取消对以下代码的注释

　　//if(e . detail==e . ms手势_标志_惯性)

　　//返回；

　　var m=新MSCSSMatrix(e . target。风格。转换)；//获取元素的最新半铸钢钢性铸铁(Cast Semi-Steel)转换

　　e。目标。样式。转换=m。translate(e.offsetX，e.offsetY) //将变换原点移动到手势中心下方。旋转（例如旋转* 180 /数学. PI) //应用旋转。缩放(电子秤)//应用缩放。translate(e.translationX，e.translationY) //应用翻译。translate(-e.offsetX，-e . offsety)；//将变换原点向后移动

　　}

　　缩放和旋转等动态手势可支持鼠标操作，具体可通过在旋转鼠标滚轮的同时分别使用计算机的计算机的ctrl按键按键（控制键)或变化修饰键来实现。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。