canvas实现图片的拖拽和缩放
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>图片加载平移放大缩小示例</title> <style> html,body{ margin:0px; padding:0px; } canvas{ border: 1px solid #000; } </style> </head> <body> <canvas id="canvas" width="800" height="800"></canvas> <script type="text/javascript" src="main.js"></script> </body> </html>
var canvas,context; var img,//图片对象 imgIsLoaded,//图片是否加载完成; imgX=0, imgY=0, imgScale=1; (function int(){ canvas=document.getElementById('canvas'); context=canvas.getContext('2d'); loadImg(); })(); function loadImg(){ img=new Image(); img.onload=function(){ imgIsLoaded=true; drawImage(); } img.src="map.jpg"; } function drawImage(){ context.clearRect(0,0,canvas.width,canvas.height); context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale); } canvas.onmousedown=function(event){ var pos=windowToCanvas(canvas,event.clientX,event.clientY); canvas.onmousemove=function(event){ canvas.style.cursor="move"; var pos1=windowToCanvas(canvas,event.clientX,event.clientY); var x=pos1.x-pos.x; var y=pos1.y-pos.y; pos=pos1; imgX+=x; imgY+=y; drawImage(); } canvas.onmouseup=function(){ canvas.onmousemove=null; canvas.onmouseup=null; canvas.style.cursor="default"; } } canvas.onmousewheel=canvas.onwheel=function(event){ var pos=windowToCanvas(canvas,event.clientX,event.clientY); event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40)); if(event.wheelDelta>0){ imgScale*=2; imgX=imgX*2-pos.x; imgY=imgY*2-pos.y; }else{ imgScale/=2; imgX=imgX*0.5+pos.x*0.5; imgY=imgY*0.5+pos.y*0.5; } drawImage(); } function windowToCanvas(canvas,x,y){ var bbox = canvas.getBoundingClientRect(); return { x:x - bbox.left - (bbox.width - canvas.width) / 2, y:y - bbox.top - (bbox.height - canvas.height) / 2 }; }