Pointer Event Api-整合鼠标事件、触摸和触控笔事件

编程之家收集整理的这篇文章主要介绍了Pointer Event Api-整合鼠标事件、触摸和触控笔事件编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Pointer Events API 是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(pen)三种事件整合为统一的API。

Pointer Event 

Pointer指可以在屏幕上反馈一个指定坐标的输入设备。Pointer Event事件和Touch Event API对应的触摸事件类似,它继承扩展了Touch Event,因此拥有Touch Event的常用属性。Pointer属性如下图:

说明:

pointerId:代表每一个独立的Pointer。根据id,我们可以很轻松的实现多点触控应用。

width/height:Mouse Event在屏幕上只能覆盖一个点的位置,但是一个Pointer可能覆盖一个更大的区域。

isPrimary:当有多个Pointer被检测到的时候(比如多点触摸),对每一种类型的Pointer会存在一个Primary Poiter。只有Primary Poiter会产生与之对应的Mouse Event。

Pointer Event API核心事件:

Mouse events,pointer events和touch events 对照表

Pointer API 的好处

Poiter API 整合了鼠标、触摸和触控笔的输入,使得我们无需对各种类型的事件区分对待。


目前不论是web还是本地应用都被设计成跨终端(手机,平板,PC)应用,鼠标多数应用在桌面应用,触摸则出现在各种设备上。过去开发人员必须针对不同的输入设备写不同的代码,或者写一个polyfill 来封装不同的逻辑。Pointer Events 改变了这种状况。

Pointer API实例

使用canvas画布来展示追踪一个pointer移动轨迹:

<canvas id="mycanvas" width="400px" height="500px" style="border: 1px solid #000"></canvas>
script type="text/javascript">
var DrawFigure = (function(){
     DrawFigure(canvas,options) {
         _this = this;
        .canvas  canvas;
        ._ctx .canvas.getContext('2d);
        .lastPt nullif(options === void 0) {
            options  {};
        }
        .options  options;
        ._handleMouseDown (event) {
            _this._mouseButtonDown true;
        }
        ._handleMouseMove (event) {
            (_this._mouseButtonDown) {
                 event  window.event || event;
                (_this.lastPt !== ) {
                    _this._ctx.beginPath();
                    _this._ctx.moveTo(_this.lastPt.x,_this.lastPt.y);
                    _this._ctx.lineTo(event.pageX,event.pageY);
                    _this._ctx.strokeStyle  _this.options.strokeStyle || green;
                    _this._ctx.lineWidth  _this.options.lineWidth 3;
                    _this._ctx.stroke();
                }
                _this.lastPt  {
                    x: event.pageX,y: event.pageY
                }
            }
        }
        ._handleMouseUp false;
            _this.canvas.removeEventListener(pointermove,_this.__handleMouseMove,);
            _this.canvas.removeEventListener(mousemove);
            _this.lastPt ;
            console.log(移除事件);
        }
        
        DrawFigure.prototype.init () {
            ._mouseButtonDown ;
            (window.PointerEvent) {
                .canvas.addEventListener(pointerdown._handleMouseDown,1)">);
                ._handleMouseMove,1)">pointerup._handleMouseUp,1)">);
            } else {
                mousedownnmouseup);
            }
        }
        
    }
    return DrawFigure;
}());
window.onload () {
     canvas  document.getElementById(mycanvas);
     drawFigure new DrawFigure(canvas);
    drawFigure.init();
}
</script>

 结果如图所示:

 多点触控实例

 首先初始一个多个颜色的数组,用来追踪不同的pointer。

var colours = ['red','green','blue','yellow','black'];

画线的时候通过pointer的id来取色。

 multitouchctx.strokeStyle = colours[id%5];
 multitouchctx.lineWidth = 3; 

在这个demo中,我们要追踪每一个pointer,所以需要分别保存每一个pointer的相关坐标点。这里我们使用关联数组来存储数据,每个数据使用pointerId做key,我们使用一个Object对象作为关联数组,用如下方法添加数据:

// This will be our associative array
var multiLastPt=new Object();
...
 Get the id of the pointer associated with the event
var id = e.pointerId;
...
 Store coords
multiLastPt[id] = {x:e.pageX,y:e.pageY};

 完整代码

<!DOCTYPE htmlhtmlheadtitle>testMeta charset="utf-8"name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
style>
    html,body{
        margin:;
        padding
        width 100%
        height
        overflow hidden;
    }
body ontouchstart="return false;"="mycanvas".canvas.width  document.documentElement.clientWidth;
        .canvas.height  document.documentElement.clientHeight;
         {};
        .colours  [redblueyellowblack]; // 初始一个多个颜色的数组,用来追踪不同的pointer
         id  event.pointerId;
            (_this.lastPt[id]) {
                    _this._ctx.beginPath();
                    _this._ctx.moveTo(_this.lastPt[id].x,_this.lastPt[id].y);
                    _this._ctx.lineTo(event.pageX,1)"> _this.colours[id%5 画线的时候通过pointer的id来取色
                    _this._ctx.lineWidth ;
                    _this._ctx.stroke();
                }
                _this.lastPt[id]  event.pointerId;
            _this._mouseButtonDown );
             delete _this.lastPt[id];
        }
        
        DrawFigure.prototype.init body>

 手机效果如图所示:

参考地址:

总结

以上是编程之家为你收集整理的Pointer Event Api-整合鼠标事件、触摸和触控笔事件全部内容,希望文章能够帮你解决Pointer Event Api-整合鼠标事件、触摸和触控笔事件所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群:1065694478(已满)
编程之家官方2群:163560250(已满)
编程之家官方3群:312128206

相关文章

猜你在找的HTML5相关文章

概述 WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素
在新的HTML5标准中,新增了一个非常重要的元素—canvas元素。使用该元素,可以在页面中直接进行各种复杂图形的制作。因此,如果使用该元素绘制统计图,比之前使用服务器端控件来生成统计图的方法更加具有
ReactJS通常也被称为&quot;React&quot;,是一个刚刚在这场游戏中登场的新手。它由Facebook创建,并在2013年首次发布。Facebook认为React在处理SPA问题上可以成
又到了一年一度的中国春运,今年的网络订票(12306.cn)有好多的故事上演,下面几条是这两天的几条相关新闻。猎豹浏览器推出春运抢票版 九大优势轻松订票抢票插件风靡的恶果:农民工成购车票弱势群体123
Twitter发布了Flight项目。Flight是一个轻量级的、基于组件的JavaScript框架,可以将行为映射到DOM节点上。Twitter将其用在自己的Web应用上,Twitter基于MIT许
JayData 是一个标准的、跨平台的库和方法,用于访问和操作各种不同的数据源,最适合用于 JavaScript 和 HTML5 应用。 官方网站:http://jaydata.org/ ASP.NE
简洁优雅的 Twitter Bootstrap Metro 界面风格开发框架,是 GitHub 上的开源项目http://talkslab.github.com/metro-bootstrap 。Me
XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS、