canvas绘制图片,实现拖拽缩放功能
上代码:
$(function(){
var isMouseDown = false;
var drawObj ={
marginLeft : 0,
marginTop:0,
scale:'',
currentImg :null,
mouseStart:{
x:"",
y:""
},
mouseEnd:{
x:"",
y:""
}
}
drawObj.canvas = $('#myCanvas');
drawObj.context = drawObj.canvas[0].getContext('2d');
//绑定事件
drawObj.canvas.on('mousedown', function(event){
if(event.button == 0){
isMouseDown = true;
drawObj.mouseStart.x = event.offsetX;
drawObj.mouseStart.y = event.offsetY;
drawObj.initMraginLeft = drawObj.marginLeft;
drawObj.initMraginTop = drawObj.marginTop;
drawImg();
}
})
drawObj.canvas.on('mousemove', function(event){
if( isMouseDown){
drawObj.mouseEnd.x = event.offsetX;
drawObj.mouseEnd.y = event.offsetY;
drawObj.marginLeft = drawObj.initMraginLeft + drawObj.mouseEnd.x - drawObj.mouseStart.x;
drawObj.marginTop = drawObj.initMraginTop + drawObj.mouseEnd.y - drawObj.mouseStart.y;
drawImg();
}
})
drawObj.canvas.on('mouseup', function(event){
if( event.button == 0){
isMouseDown = false;
drawObj.mouseEnd.x = event.offsetX;
drawObj.mouseEnd.y = event.offsetY;
drawObj.marginLeft = drawObj.initMraginLeft +drawObj.mouseEnd.x - drawObj.mouseStart.x;
drawObj.marginTop = drawObj.initMraginTop +drawObj.mouseEnd.y - drawObj.mouseStart.y;
drawImg();
}
})
drawObj.canvas.on('wheel', function(event){
if( event.originalEvent.wheelDelta > 0){
drawObj.scale+=0.05;
}else{
if (drawObj.scale > 0.10) {
drawObj.scale -= 0.05;
}
}
drawImg();
})
//开始绘制,计算中心位置
var initCanvas = function(){
var img = new Image();
img.src="/static/img/A.jpg";
img.onload = function(){
var canvasWidth = drawObj.canvas.width();
var canvasHeight = drawObj.canvas.height();
var zoom = canvasWidth /img.width ;
if(img.height * zoom > canvasHeight){
zoom = canvasHeight /img.height ;
}
drawObj.scale = zoom ;
drawObj.marginLeft = (canvasWidth - img.width *zoom ) / 2;
drawObj.marginTop = (canvasHeight - img.height *zoom ) / 2;
drawObj.currentImg = img;
drawImg();
}
}
//每次鼠标移动调用此方法,实时绘制图片位置
var drawImg = function(){
drawObj.context.fillStyle = '#000';
drawObj.context.fillRect(0, 0, drawObj.canvas.width(), drawObj.canvas.height());
var zoom = drawObj.scale;
var img = drawObj.currentImg;
var currentWidth = zoom * img.width;
var currentHeight = zoom * img.height;
drawObj.context.drawImage(img , 0 , 0 ,img.width,img.height,drawObj.marginLeft , drawObj.marginTop , currentWidth ,currentHeight);
}
initCanvas();
})
思路:
计算图片的中心位置,即代码中的marginLeft 和 marginTop ;
在移动过程中,实时计算marginLeft 和 marginTop ; 在缩放过程中,实时计算 scale,缩放比列。
绘制图片drawImage方法中有九个参数。
有不懂的,欢迎随时交流!大佬,也可以给提出宝贵意见!