HTML 5 canvasは画像のズームと平行移動を実現する

必要な変数の定義

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-imgX 1)(imgX 1が変化した位置)imgX 1=(imgX-startPointX)*imgScale+startPointXとなる.画像をスケーリングすると、クリック位置から画像位置までの距離が取得され、その距離がスケーリングされていない状態、すなわちimgX 1=((imgX-startPointX)/imgScale Up)*imgScale+startPointXに戻る.imgScale Upは、ズーム終了時のズーム値です

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が現在の画像の位置を取得します.endPointX 1はマウス移動中のx座標であり、endPointX 1-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;
          
        }
    }
}