定义所需要的变量
var canvas=document.getElementById("myCanvas");
var canvasDraw=canvas.getContext("2d");
var startPointX=0;//起始点 x
var startPointY=0;//起始点 y
var imgX=0;//设置img在的位置
var imgY=0;//
var imgX1=0;
var imgY1=0;//中间变量
var imgScale=1;
var imgScaleUp=1;
加载图片
var img=new Image()
img.src="img/map1.png"
img.onload = function(){
canvasDraw.drawImage(img,imgX,imgY,img.width,img.height);
}
对canvas绑定滚轮事件,startPointX、startPointY为鼠标点击的位置,以(startPointX,startPointY)为中心点进行图片的缩放。设当前为图片没有缩放的状态、图片位置为(imgX,imgY),当进行缩放时,缩放值为imgScale,则(startPointX-imgX)*imgScale=(startPointX-imgX1)(imgX1为变化后的位置),得imgX1=(imgX-startPointX)*imgScale+startPointX;。当图片进行缩放时,获取点击位置到图片位置的距离,并将该距离恢复为没有缩放的状态,即imgX1=((imgX-startPointX)/imgScaleUp)*imgScale+startPointX;,imgScaleUp为缩放结束时的缩放值
function imgScaleWheel(){
canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox浏览器兼容
if(event.wheelDelta>0){
imgScale+=0.1;
}else{
if(imgScale>0.2){
imgScale-=0.1;
}
};
//需要xy的中间变量
imgX1=((imgX-startPointX)/imgScaleUp)*imgScale+startPointX;
imgY1=((imgY-startPointY)/imgScaleUp)*imgScale+startPointY;
canvasDraw.clearRect(0,0, canvas.width,canvas.height);//清除整个画布
drawImg(img,imgX1,imgY1,imgScale);
console.log("滚轮 imgX1",imgX1,"imgY1",imgY1)
}
}
对canvas绑定鼠标事件,但鼠标点击时,imgScaleUp获取当前缩放值,imgX imgY获取当前图片的位置。endPointX1为在鼠标移动过程中的x坐标,将endPointX1-startPointX 即为图片x的偏移量
function movexy() {
canvas.onmousedown = function (e) {
startPointX=getScreen(e).x;
startPointY=getScreen(e).y;
var buttonType=e.button;
//获取缩放后的最终
imgX=imgX1;
imgY=imgY1;
imgScaleUp=imgScale;
console.log("startPointX",startPointX,"startPointY",startPointY)
canvas.onmousemove = function (evt) { //实时改变位置
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var endPointX1 = e.pageX || e.clientX + scrollX;
var endPointY1 = e.pageY || e.clientY + scrollY;
endPointX1-=canvas.offsetLeft;
endPointY1-=canvas.offsetTop;
if(buttonType==1){//滚轮平移
canvasDraw.clearRect(0,0, canvas.width,canvas.height);//清除整个画布
translateX=endPointX1-startPointX;
translateY=endPointY1-startPointY;
imgX1=imgX+translateX;
imgY1=imgY+translateY;
drawImg(img,imgX1,imgY1,imgScale);
}
endPointX=endPointX1;
endPointY=endPointY1;
}
//停止按下与拖动事件
canvas.onmouseup = function () {
canvas.onmousemove = null;
canvas.onmouseup = null;
}
}
}