终于开始可以写代码了，手都开始痒了。这里的代码仅仅是在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. R: 数据结构、数据类型的描述。

    ################################################### 问题:数据结构..类型  18.4.27 有哪些数据结构.类型??  各自有什么特点? 解决方案 ...

  2. spider（一）

    此爬虫内容无架构: 1.URL管理器:用集合,mysql表,缓存等 2.网页下载器:实现网页下载, urllib2:官方基础模块 requests:三方的(更强):伪装成浏览器访问,代理登录,http ...

  3. c/c++转义字符大全【转自互联网】

    将转义字符收集如下:转义字符 意义 ASCII码值(十进制) \a 响铃(BEL) 007 \b 退格(BS) 008 \f 换页(FF) 012 \n 换行(LF) 010 \r 回车(CR) 01 ...

  4. Ubuntu14跑DSO

    按照https://github.com/JakobEngel/dso上的说明,make -j4的时候出现一下错误: /home/zhao/dso/src/FullSystem/CoarseIniti ...

  5. C#结构体指针的定义及使用详解（intptr的用法）

    在解析C#结构体指针前,必须知道C#结构体是如何定义的.在c#中同样定义该结构体. C#结构体指针之C#结构体的定义: [StructLayout(LayoutKind.Sequential)] pu ...

  6. AutoCAD 2014 在Server 2008 中 十字光标很慢

    另外,请在你们的Windows Server上增加如下注册表: On      both Windows Server 2008 R2 and Windows Server 2012 create E ...

  7. MVVM与Controller瘦身实践

    MVC是一个做iOS开发都知道的设计模式,也是Apple官方推荐的设计模式.实际上,Cocoa Touch就是按照MVC来设计的. 这里,我们先不讲MVC是什么,我们先来谈谈软件设计的一些原则或者说理 ...

  8. CF616D Longest k-Good Segment

    题目描述 给定一个包含\(n\)个整数的序列\(a\),\(0\le a_i \le 10^6\),询问不重复数字个数\(\le k\)的最长区间的左右端点.如果有多解输出任意一组. 输入输出格式 输 ...

  9. JS如何在本地读取json等文件

    JS使用ajax等在本地读取文件的时候,会报如下的错误: 解决方法一: npm install http-server -g  全局安装 http-server 下载完成之后再在目标文件中cmd中输入 ...

  10. vue实现复制功能（项目使用）

    安装依赖 npm install --save vue-clipboard2 用法: import Vue import VueClipboard from 'vue-clipboard2' Vue. ...