Canvas实现图片放大缩小移动操作

对于HTML5相信大家都不陌生，很早就出来了，但是貌似都没有真正的使用过。最近做项目时要实现这样一个需求：一个图片，大小不固定，要求能实现类似地图一样放大、缩小、移动功能。这里就很合适使用html5的canvas画布。
实现步骤如下：
1. 定义一个canvas标签。

<canvas id="bargraphCanvas" width="500" height="600"></canvas>

　　这里有个很重要的地方，就是这个width和height一定要写，否则不能实现。同时，画布的宽高只能用这个方法写，css设置有问题。大家可以试试。

 

2.初始化canvas,以及其他所需对象。

var canvas, context;
var img,//图片对象
    imgIsLoaded,//图片是否加载完成;
    imgX = 0,
    imgY = 0,
    imgScale = 1;

(function int() {
    canvas = document.getElementById('bargraphCanvas'); //画布对象
    context = canvas.getContext('2d');//画布显示二维图片
    loadImg();
})();

　　

3.定义一个image对象并设置好它的onload事件和src属性。

function loadImg() {
    img = new Image();
    img.onload = function () {
        imgIsLoaded = true;
        drawImage();
    }
    img.src = '../../Content/images/mayday.jpg';
}

　　

4.调用canvas的draw方法。

function drawImage() {
    context.clearRect(0, 0, canvas.width, canvas.height);
     context.drawImage(
            img, //规定要使用的图像、画布或视频。
            0, 0, //开始剪切的 x 坐标位置。
            img.width, img.height,  //被剪切图像的高度。
            imgX, imgY,//在画布上放置图像的 x 、y坐标位置。
            img.width * imgScale, img.height * imgScale  //要使用的图像的宽度、高度
        );}

　　

这里要介绍下canvas的drawImage方法，参考w3school，drawImage是可以实现图片的裁剪功能，参数的含义以及是否必填如下：
** img 规定要使用的图像、画布或视频。
** sx 可选。开始剪切的 x 坐标位置。
** sy 可选。开始剪切的 y 坐标位置。
** swidth 可选。被剪切图像的宽度。
** sheight 可选。被剪切图像的高度。
** x 在画布上放置图像的 x 坐标位置。
** y 在画布上放置图像的 y 坐标位置。
** width 可选。要使用的图像的宽度。（伸展或缩小图像）
** height 可选。要使用的图像的高度。（伸展或缩小图像）

5.到这里，如果代码没有问题的话，图片就可以成功地在canvas中显示了。下面就是实现放大、缩小、平移操作。在初始化canvas的同时也初始化其事件，如下：

/*事件注册*/
function canvasEventsInit() {
    canvas.onmousedown = function (event) {
        var pos = windowToCanvas(event.clientX, event.clientY);  //坐标转换，将窗口坐标转换成canvas的坐标

        canvas.onmousemove = function (evt) {  //移动
            canvas.style.cursor = 'move';
            var posl = windowToCanvas(evt.clientX, evt.clientY);
            var x = posl.x - pos.x;
            var y = posl.y - pos.y;
            pos = posl;
            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 (event.clientX, event.clientY);
        event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-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(x,y) {
    var box = canvas.getBoundingClientRect();  //这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
    return {
        x: x - box.left - (box.width - canvas.width) / 2,
        y: y - box.top - (box.height - canvas.height) / 2
    };
}

　　按照这些步骤，图片的加载，放大、缩小、平移都已经实现了。个人感觉这个比较难的地方在于，这个是使用原生javascript写的，如果使用jquery会不会简单些，以后有时间再试试吧。目前效果如下：