终于开始可以写代码了，手都开始痒了。这里的代码仅仅是在chrome检测过，我可以肯定的是IE10以下浏览器是行不通，我一直在考虑，是不是使用IE禁止看我的篇博客，就是这群使用IE的人，给我加了很多工作量。

一个地图的基本动作，无非就是加载数据，平移，放大与缩小。这篇博客主要是通过一张图片的方式来模拟一下。

我这里认为大家都稍微了解甚至熟悉canvas的一些API，就不具体说，每一个参数代表什么意思了。

<!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;

function int(){

    canvas=document.getElementById('canvas');

    context=canvas.getContext('2d');

}　

图片加载

创建一个图片对象之后，图片不能马上绘制到canvas上面，因为图片还没有加载完成。所以我们需要监听图片对象加载完事件，然后再去绘制。

var img,//图片对象

    imgIsLoaded//图片是否加载完成;

function loadImg(){

    img=new Image();

    img.onload=function(){

        imgIsLoaded=true;

        //draw image

    }

    img.src="map.jpg";

}

图片绘制

绘制图像一个函数就可以搞定，但是需要记录这个图像的左上角坐标以及缩放比例。

var imgX,imgY,imgScale;

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);

}

图片平移

　html5事件最小细度在DOM上，所以我们无法对canvas上的图像做监听，只能对canvas监听。

  1. 首先监听鼠标mousedown事件，等事件发生之后，再监听鼠标mousemove事件和mouseup事件
  2. mousemove事件发生之后，获得鼠标移动的位移，相应的图片的位置改变多少
  3. mouseup事件发生之后，取消对mousemove以及mouseup事件监听
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";

    }

}

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

    };

}

图片缩放

其实缩放很简单，稍微复杂的是，如何让鼠标成为放大或者缩小的中心。如果数学几何不好，计算公式就可能看不明白了。

canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox浏览器兼容

    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();

}

　　这个时候，基本功能就实现了，加载一张图片和加载多张图片都差不多，维护每一张图片的位置和大小，下面来整理一下代码吧。

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

    };

}

　　如果不想复制这些代码的话，可以温柔的点击一下这里下载

使用HTML5 canvas做地图（3）图片加载平移放大缩小的更多相关文章

  1. 使用HTML5 canvas做地图（1）基础知识

    之前一直想使用HTML5技术全新做一套地图API,可是苦于时间和精力,迟迟未有行动.后来下定决心,利用下班和周末做出一个大体框架出来,现在和网友分享一下自己的整体的一个思路和想法.欢迎大家提出宝贵建议 ...

  2. 使用HTML5 canvas做地图（2）瓦片以及如何计算的

    上一篇也说到瓦片,我们为什么使用瓦片?这一篇主要是关于如何拼接地图? 下面的一张图,可以一眼明了,地图是如何切割以及拼接的. 瓦片信息 瓦片信息包括切图原点,瓦片大小,格式,分辨率以及分辨率级别等. ...

  3. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  4. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  5. 问题1：canvas绘制图片加载不出来

    <head> <script src="js/index.js" type="text/javascript" charset="u ...

  6. touchweb手机网站图片加载方法（canvas加载和延迟加载）

    一.canvas图片加载 关于canvas加载,我的方法是,将文章中所有用到图片的地方,都用canvas代替,给canvas一个data-src,里面存放img的路径,通过canvas方法渲染图片.因 ...

  7. 深入探索Glide图片加载框架：做了哪些优化?如何管理生命周期?怎么做大图加载?

    前言 Glide可以说是最常用的图片加载框架了,Glide链式调用使用方便,性能上也可以满足大多数场景的使用,Glide源码与原理也是面试中的常客. 但是Glide的源码内容比较多,想要学习它的源码往 ...

  8. android glide图片加载框架

    项目地址: https://github.com/bumptech/glide Glide作为安卓开发常用的图片加载库,有许多实用而且强大的功能,那么,今天就来总结一番,这次把比较常见的都写出来,但并 ...

  9. Android图片加载框架最全解析（五），Glide强大的图片变换功能

    大家好,又到了学习Glide的时间了.前段时间由于项目开发紧张,再加上后来又生病了,所以停更了一个月,不过现在终于又可以恢复正常更新了.今天是这个系列的第五篇文章,在前面四篇文章的当中,我们已经学习了 ...

随机推荐

  1. tensorflow session会话控制

    import tensorflow as tf # create two matrixes matrix1 = tf.constant([[3,3]]) matrix2 = tf.constant([ ...

  2. 15. CTF综合靶机渗透(八)

    VM Name: BlackMarket VM Description: BlackMarket VM presented at Brisbane SecTalks BNE0x1B (28th Ses ...

  3. 释放License命令

    lmutil_x86.exe lmremove -c 1055@Vappcloud-WinS acfd Administrator VappCloud_Win7a.vancloud-corp.com ...

  4. 使用Log4j2，打包后提示ERROR StatusLogger Log4j2 could not find a logging implementation.

    从Log4j切换到Log4j2,没有打包之前日志输出正常,但是打包后总是提示下面内容: 错误一: ERROR StatusLogger Log4j2 could not find a logging ...

  5. 网络应用（3）：CDN与P2P的概念

    我前面说了流量的概念,流量是使用网络时经常要考虑的一个因素--如何才能更快的使用流量,如何才能节省流量使用的成本,对于这样的问题,你可能要了解一下什么是cdn,什么是p2p. (1)cdn是什么 cd ...

  6. 清北刷题冲刺 11-01 p.m

    轮换 #include<iostream> #include<cstdio> #include<cstring> #define maxn 1010 using n ...

  7. python-django框架中使用七牛云

    1:注册七牛云账号 https://www.qiniu.com/ js文件 链接:https://pan.baidu.com/s/1BW1svHqEsXrrTNtRobKkpg  提取码:ixta 2 ...

  8. Python制作NTF传递函数工况文件和后处理文件

    摘要:在平时工作中,TB车身的传递函数分析,涉及到大量重复行的工作,费时费力.在学习python基础后,希望通过代码解决这部分重复工作.基础入门级操作,但是能够解决很大一部分工作内容.日后,待pyth ...

  9. Linux调优（网络）

    定义socket接受缓冲大小 net.core.rmem_default = N #接受 net.core.rmem_max = N net.core.wmem_default = N #发送 net ...

  10. 解决request中文乱码问题

    因为request请求都是ISO-8859-1,而jsp页面是采用UTF-8编码,所以当传递的参数有中文时,页面会出现乱码,但是可以将取到的数据通过String的构造函数使用指定的编码类型重新构造一个 ...