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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset='utf-8'>
  5. 		<title>图片加载平移放大缩小示例</title>
  6. 		<style>
  7. 			html,body{
  8. 				margin:0px;
  9. 				padding:0px;
  10. 			}
  11. 			canvas{
  12. 				border: 1px solid #000;
  13. 			}
  14. 		</style>
  15. 	</head>
  16. 	<body>
  17. 		<canvas id="canvas" width="800" height="800"></canvas>
  18. 		<script type="text/javascript" src="main.js"></script>
  19. 	</body>
  20. </html>
  1. var canvas,context;
  2. function int(){
  3.     canvas=document.getElementById('canvas');
  4.     context=canvas.getContext('2d');
  5. }　

图片加载

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

  1. var img,//图片对象
  2.     imgIsLoaded//图片是否加载完成;
  3. function loadImg(){
  4.     img=new Image();
  5.     img.onload=function(){
  6.         imgIsLoaded=true;
  7.         //draw image
  8.     }
  9.     img.src="map.jpg";
  10. }

图片绘制

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

  1. var imgX,imgY,imgScale;
  2. function drawImage(){
  3.     context.clearRect(0,0,canvas.width,canvas.height);
  4.     context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);
  5. }

图片平移

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

  1. 首先监听鼠标mousedown事件，等事件发生之后，再监听鼠标mousemove事件和mouseup事件
  2. mousemove事件发生之后，获得鼠标移动的位移，相应的图片的位置改变多少
  3. mouseup事件发生之后，取消对mousemove以及mouseup事件监听
  1. canvas.onmousedown=function(event){
  2.     var pos=windowToCanvas(canvas,event.clientX,event.clientY);
  3.     canvas.onmousemove=function(event){
  4.         canvas.style.cursor="move";
  5.         var pos1=windowToCanvas(canvas,event.clientX,event.clientY);
  6.         var x=pos1.x-pos.x;
  7.         var y=pos1.y-pos.y;
  8.         pos=pos1;
  9.         imgX+=x;
  10.         imgY+=y;
  11.         drawImage();
  12.     }
  13.     canvas.onmouseup=function(){
  14.         canvas.onmousemove=null;
  15.         canvas.onmouseup=null;
  16.         canvas.style.cursor="default";
  17.     }
  18. }
  19.  
  20. function windowToCanvas(canvas,x,y){
  21.     var bbox = canvas.getBoundingClientRect();
  22.     return {
  23.         x:x - bbox.left - (bbox.width - canvas.width) / 2,
  24.         y:y - bbox.top - (bbox.height - canvas.height) / 2
  25.     };
  26. }

图片缩放

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

  1. canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox浏览器兼容
  2.     var pos=windowToCanvas(canvas,event.clientX,event.clientY);
  3.     event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));
  4.     if(event.wheelDelta>0){
  5.         imgScale*=2;
  6.         imgX=imgX*2-pos.x;
  7.         imgY=imgY*2-pos.y;
  8.     }else{
  9.         imgScale/=2;
  10.         imgX=imgX*0.5+pos.x*0.5;
  11.         imgY=imgY*0.5+pos.y*0.5;
  12.     }
  13.     drawImage();
  14. }

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

  1. var canvas,context;
  2. var img,//图片对象
  3.     imgIsLoaded,//图片是否加载完成;
  4.     imgX=0,
  5.     imgY=0,
  6.     imgScale=1;
  7.  
  8. (function int(){
  9.     canvas=document.getElementById('canvas');
  10.     context=canvas.getContext('2d');
  11.     loadImg();
  12. })();
  13.  
  14. function loadImg(){
  15.     img=new Image();
  16.     img.onload=function(){
  17.         imgIsLoaded=true;
  18.         drawImage();
  19.     }
  20.     img.src="map.jpg";
  21. }
  22.  
  23. function drawImage(){
  24.     context.clearRect(0,0,canvas.width,canvas.height);
  25.     context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);
  26. }
  27.  
  28. canvas.onmousedown=function(event){
  29.     var pos=windowToCanvas(canvas,event.clientX,event.clientY);
  30.     canvas.onmousemove=function(event){
  31.         canvas.style.cursor="move";
  32.         var pos1=windowToCanvas(canvas,event.clientX,event.clientY);
  33.         var x=pos1.x-pos.x;
  34.         var y=pos1.y-pos.y;
  35.         pos=pos1;
  36.         imgX+=x;
  37.         imgY+=y;
  38.         drawImage();
  39.     }
  40.     canvas.onmouseup=function(){
  41.         canvas.onmousemove=null;
  42.         canvas.onmouseup=null;
  43.         canvas.style.cursor="default";
  44.     }
  45. }
  46. canvas.onmousewheel=canvas.onwheel=function(event){
  47.     var pos=windowToCanvas(canvas,event.clientX,event.clientY);
  48.     event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));
  49.     if(event.wheelDelta>0){
  50.         imgScale*=2;
  51.         imgX=imgX*2-pos.x;
  52.         imgY=imgY*2-pos.y;
  53.     }else{
  54.         imgScale/=2;
  55.         imgX=imgX*0.5+pos.x*0.5;
  56.         imgY=imgY*0.5+pos.y*0.5;
  57.     }
  58.     drawImage();
  59. }
  60.  
  61. function windowToCanvas(canvas,x,y){
  62.     var bbox = canvas.getBoundingClientRect();
  63.     return {
  64.         x:x - bbox.left - (bbox.width - canvas.width) / 2,
  65.         y:y - bbox.top - (bbox.height - canvas.height) / 2
  66.     };
  67. }

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

使用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. 26、HDF5 文件格式简介

    转载:庐州月光 http://www.cnblogs.com/xudongliang/p/6907733.html 三代测序下机的原始数据不再是fastq格式了,而是换成了hdf5 格式,在做三代数据 ...

  2. sublime text 3如何安装插件和设置字号

    使用ctrl + ~(这个符号是键盘上1前面那个),如果不能调用出就需要修改快捷键,在Preferences ->Key Bindings - Default打开文件后,大概在248行,这里我修 ...

  3. If,for,range混合使用笔记-（VBA视频教程2：使用IF进行逻辑判断）

    -- 新建表格:#单元格a1-a100全部等于1的代码 Sub test() Dim i As Integer For i = To Range( Next End Sub -- 新建表格:#单元格a ...

  4. 洛谷P1022 计算器的改良

    P1022 计算器的改良 题目背景 NCL是一家专门从事计算器改良与升级的实验室,最近该实验室收到了某公司所委托的一个任务:需要在该公司某型号的计算器上加上解一元一次方程的功能.实验室将这个任务交给了 ...

  5. HDFS（Hadoop Distributed File System ）hadoop分布式文件系统。

    HDFS(Hadoop Distributed File System )hadoop分布式文件系统.HDFS有如下特点:保存多个副本,且提供容错机制,副本丢失或宕机自动恢复.默认存3份.运行在廉价的 ...

  6. Multi-catch parameters are not allowed for source level below 1.7 报错处理

    有可能是你项目右键build-path里面的这个东西 在项目上右键properties->project Facets->修改右侧的version  保持一致 还有一个就是Window里面 ...

  7. centos7安装配置docker

    1. 安装/升级Docker客户端 Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker . uname -r 从 ...

  8. shell学习（13）- vim

    其中部分内容是转载的. 在命令状态下对当前行用== (连按=两次), 或对多行用n==(n是自然数)表示自动缩进从当前行起的下面n行.你可以试试把代码缩进任意打乱再用n==排版,相当于一般IDE里的c ...

  9. 手动添加git 到 右键菜单

    1.通过在“运行”中输入‘regedit’,打开注册表. 2.找到[HKEY_CLASSES_ROOT\Directory\Background]. 3.在[Background]下如果没有[shel ...

  10. P2066 机器分配 （DP+DP输出）

    题目描述 总公司拥有高效设备M台,准备分给下属的N个分公司.各分公司若获得这些设备,可以为国家提供一定的盈利.问:如何分配这M台设备才能使国家得到的盈利最大?求出最大盈利值.其中M≤15,N≤10.分 ...