canvas 实现图片放大缩小拖拽 移动端、PC端

前言

实现目标：使用canvas画出地图，且可以通过鼠标滚轮缩放，拖拽；手指滑动拖拽，手势缩放

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)  //下面的变量名以此为准

<template>
    <canvas ref="bargraphCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
</template>

拖拽功能

PC端三个事件：onmousedown，onmousemove，onmouseup
移动端三个事件：ontouchstart，ontouchmove，ontouchend

放大与缩小

监听滚轮事件：onmousewheel

公式

/*坐标转换*/
    windowToCanvas(x,y) {
        var box = this.myCanvas.getBoundingClientRect();  //这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
        return {
            x: x - box.left - (box.width - this.myCanvas.width) / 2,
            y: y - box.top - (box.height - this.myCanvas.height) / 2
        };
    },

    //缩放 勾股定理方法-求两点之间的距离
    getDistance(p1, p2) {
        var x = p2.pageX - p1.pageX,
        y = p2.pageY - p1.pageY;
        return Math.sqrt((x * x) + (y * y));
    },

判断是否为移动端

IsPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = ["Android", "iPhone",
                  "SymbianOS", "Windows Phone",
                  "iPad", "iPod"];
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
          if (userAgentInfo.indexOf(Agents[v]) > 0) {
              flag = false;
              break;
          }
      }
      return flag;
    },

代码：https://github.com/zzbigbigboy/Canvas-Map/tree/master/src/pages