canvas绘制图片，实现拖拽缩放功能

最新推荐文章于 2024-06-17 14:58:27 发布

呆萌的程序员

最新推荐文章于 2024-06-17 14:58:27 发布

阅读量636

点赞数 1

文章标签： canvas

本文链接：https://blog.csdn.net/qq_40214780/article/details/103768723

版权

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方法中有九个参数。
有不懂的，欢迎随时交流！大佬，也可以给提出宝贵意见！