终于开始可以写代码了，手都开始痒了。这里的代码仅仅是在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. Flask05 cookie、类视图、方法视图、自己的404页面

    1 什么是cookie 就是网站存放到你浏览器中的一部分固定内容:当你下次访问我这个网站的时候,你会把之前我存放到你浏览器中的数据带回来给我        你要先登录(用户名.密码) ->   ...

  2. 杭电acm 1022题

    Problem Description As the new term comes, the Ignatius Train Station is very busy nowadays. A lot o ...

  3. 使用form 组件写一个用户注册，并用 bootstrap渲染

    需求:使用form组件,写一个用户注册系统,包含用户名, 密码, 确认密码,手机号,性别,爱好,注册.并用bootsrap渲染,成果如下: 首先创建一个django 项目.然后在连接pymysql数据 ...

  4. vivado中使用debug不能连接到vcse_server

    打开 Xilinx Design Tools -> ISE Design Suite 14.7 -> Accessories -> ISE Design Suite 64 Bit C ...

  5. Docker版本

    第一次接触到安装docker的时候,网上的 安装 有 lxc-docker, docker-engine, docker.io, docker-ce 这些包,肯定会有些迷糊.读完这篇文章你就清楚了. ...

  6. Libvirt外部快照

    外部快照的创建 实验环境 CentOS 7 升级QEMU CentOS 7自带的qemu版本太低需要升级 $ sudo yum install -y gcc $ sudo yum install -y ...

  7. Linux中常用压缩命令

    .zip格式压缩 zip 压缩文件名 源文件 压缩文件 zip -r 压缩文件名 源目录 压缩目录 .zip格式解压缩 unzip 压缩文件 解压.zip文件 .gz格式压缩 gzip 源文件 压缩为 ...

  8. 初识XML

    前言 前期敲机房的时候,总是写配置文件,后来到ASP.NET学习中也遇到了XML,可是什么是XML呢,它又是用来干什么的呢?请听我细细道来. 内容 定义 (eXtensible Markup Lang ...

  9. hdu6070(分数规划/二分+线段树区间更新,区间最值)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=6070 题意: 给出一个题目提交序列, 从中选出一个正确率最小的子串. 选中的子串中每个题目当且仅当最 ...

  10. uva 1614奇怪的股市（归纳法证明，贪心）

    uva 1614奇怪的股市(归纳法证明,贪心) 输入一个长度为n的序列a,满足\(1\le a_i\le i\),要求确定每个数的正负号,使得所有数的总和为0.例如a={1, 2, 3, 4},则4个 ...