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

前端开发作者： 2024-08-20 17:30:02

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

<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>

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

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

// 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>