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(){
function DrawFigure(canvas,options) {
var _this = this;
this.canvas = canvas;
this._ctx = this.canvas.getContext(‘2d‘);
this.lastPt = null;
if(options === void 0) {
options = {};
}
this.options = options;
this._handleMouseDown = function(event) {
_this._mouseButtonDown = true;
}
this._handleMouseMove = function(event) {
if(_this._mouseButtonDown) {
var event = window.event || event;
if(_this.lastPt !== null) {
_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
}
}
}
this._handleMouseUp = function(event) {
_this._mouseButtonDown = false;
_this.canvas.removeEventListener(‘pointermove‘,_this.__handleMouseMove,false);
_this.canvas.removeEventListener(‘mousemove‘,_this.__handleMouseMove,false);
_this.lastPt = null;
console.log(‘移除事件‘);
}
DrawFigure.prototype.init = function() {
this._mouseButtonDown = false;
if(window.PointerEvent) {
this.canvas.addEventListener(‘pointerdown‘,this._handleMouseDown,false);
this.canvas.addEventListener(‘pointermove‘,this._handleMouseMove,false);
this.canvas.addEventListener(‘pointerup‘,this._handleMouseUp,false);
} else {
this.canvas.addEventListener(‘mousedownn‘,this._handleMouseDown,false);
this.canvas.addEventListener(‘mousemove‘,this._handleMouseMove,false);
this.canvas.addEventListener(‘mouseup‘,this._handleMouseUp,false);
}
}
}
return DrawFigure;
}());
window.onload = function() {
var canvas = document.getElementById(‘mycanvas‘);
var 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 html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta 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:0;
padding:0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body ontouchstart="return false;">
<canvas id="mycanvas"></canvas>
<script type="text/javascript">
var DrawFigure = (function(){
function DrawFigure(canvas,options) {
var _this = this;
this.canvas = canvas;
this.canvas.width = document.documentElement.clientWidth;
this.canvas.height = document.documentElement.clientHeight;
this._ctx = this.canvas.getContext(‘2d‘);
this.lastPt = {};
if(options === void 0) {
options = {};
}
this.options = options;
this.colours = [‘red‘, ‘green‘, ‘blue‘, ‘yellow‘, ‘black‘]; // 初始一个多个颜色的数组，用来追踪不同的pointer
this._handleMouseDown = function(event) {
_this._mouseButtonDown = true;
}
this._handleMouseMove = function(event) {
var id = event.pointerId;
if(_this._mouseButtonDown) {
var event = window.event || event;
if(_this.lastPt[id]) {
_this._ctx.beginPath();
_this._ctx.moveTo(_this.lastPt[id].x,_this.lastPt[id].y);
_this._ctx.lineTo(event.pageX,event.pageY);
_this._ctx.strokeStyle = _this.colours[id%5]; // 画线的时候通过pointer的id来取色
_this._ctx.lineWidth = _this.options.lineWidth || 3;
_this._ctx.stroke();
}
_this.lastPt[id] = {
x: event.pageX,
y: event.pageY
}
}
}
this._handleMouseUp = function(event) {
var id = event.pointerId;
_this._mouseButtonDown = false;
_this.canvas.removeEventListener(‘pointermove‘,_this.__handleMouseMove,false);
_this.canvas.removeEventListener(‘mousemove‘,_this.__handleMouseMove,false);
delete _this.lastPt[id];
}
DrawFigure.prototype.init = function() {
this._mouseButtonDown = false;
if(window.PointerEvent) {
this.canvas.addEventListener(‘pointerdown‘,this._handleMouseDown,false);
this.canvas.addEventListener(‘pointermove‘,this._handleMouseMove,false);
this.canvas.addEventListener(‘pointerup‘,this._handleMouseUp,false);
} else {
this.canvas.addEventListener(‘mousedownn‘,this._handleMouseDown,false);
this.canvas.addEventListener(‘mousemove‘,this._handleMouseMove,false);
this.canvas.addEventListener(‘mouseup‘,this._handleMouseUp,false);
}
}
}
return DrawFigure;
}());
window.onload = function() {
var canvas = document.getElementById(‘mycanvas‘);
var drawFigure = new DrawFigure(canvas);
drawFigure.init();
}
</script>
</body>
</html>手机效果如图所示：
参考地址：
相关推荐
honeyth 2020-09-13
mjshldcsd 2020-08-15
Ping 2020-08-15
Kakoola 2020-08-01
Yellowpython 2020-08-01
chenguangchun 2020-07-26
dailinqing 2020-07-18
delmarks 2020-06-28
MayerF 2020-06-14
MrHaoNan 2020-06-13
smalllove 2020-06-09
JayFighting 2020-06-08
xiaoge00 2020-06-07
haokele 2020-05-31
matthewhan 2020-05-25
Alanxz 2020-05-20
82550495 2020-05-19
jonychen 2020-04-22