前言
实现目标：使用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;},
