终于开始可以写代码了，手都开始痒了。这里的代码仅仅是在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. 3、perl进阶

    1.条件判断与循环结构(if (unless)  while(until) for foreach next last redo) if (unless)  关系运算符: 数字关系运算符(>,& ...

  2. C# 用委托有什么好处？ 它起什么作用？

    什么是委托 首先要知道什么是委托,用最通俗易懂的话来讲,你就可以把委托看成是用来执行方法(函数)的一个东西. 如何使用委托 在使用委托的时候,你可以像对待一个类一样对待它.即先声明,再实例化.只是有点 ...

  3. RDS mysql 与ECS自建mysql做主从备份

    由于公司要组建一个数据中心,简而言之就是把各个地方的数据都同步到一个地方,做BI建模和数据分析. 一般来说这种需求是由hadoop来实现的,但由于预算不够..所以,来个low点的办法吧 以下主要是讲r ...

  4. [翻译]pytest测试框架（二）：使用

    此文已由作者吴琪惠授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 调用pytest 调用命令: python -m pytest [...] 上面的命令相当于在命令行直接调用 ...

  5. 审美赛_（java）实现

    问题描述 <审美的历程>课上有n位学生,帅老师展示了m幅画,其中有些是梵高的作品,另外的都出自五岁小朋友之手.老师请同学们分辨哪些画的作者是梵高,但是老师自己并没有答案,因为这些画看上去都 ...

  6. flask-sqlalchemy中 backref lazy的参数实例解释和选择

    官方文档:http://docs.sqlalchemy.org/en/rel_1_0/orm/basic_relationships.html#relationship-patterns 最近在学习到 ...

  7. 《OD面试》Java软件工程师

    一.JVM自动内存管理机制 1. Java内存模型 1.1 由所有线程共享的数据区: 1.1.1 方法区(Method Area), Non-Heap(非堆) 用户存储已被虚拟机加载的类信息.常量.静 ...

  8. 树的直径 【bzoj3363】[Usaco2004 Feb]Cow Marathon 奶牛马拉松

    3363: [Usaco2004 Feb]Cow Marathon 奶牛马拉松 Description ​ 最近美国过度肥胖非常普遍,农夫约翰为了让他的奶牛多做运动,举办了奶牛马拉松．马拉 松路线要尽 ...

  9. 如何在html文件中导入header、footer等

    1.include是php函数,所以确实需要转化成.php文件--(其实除了用php,html都有自带的引入方法)2.html转化为php文件很简单,直接改一下后缀名就可以了--(如:index.ht ...

  10. poi使用

    1.首先需要下载Apache POI 打开poi下载的链接:http://poi.apache.org/download.html  ,点击“The latest stable release is ...