终于开始可以写代码了，手都开始痒了。这里的代码仅仅是在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. C++多线程框架

    Thread线程框架 线程定义:线程可以理解为一个特立独行的函数.其存在的意义,就是并行,避免了主线程的阻塞. ----------------------------thread与函数------- ...

  2. 字符串中去除多余的空格保留一个(MS SQL Server)

    大约2年前,写过一篇<字符串中去除多余的空格保留一个(C#)>https://www.cnblogs.com/insus/p/7954151.html 今天,Insus.NET使用MS S ...

  3. Spring第一天：Spring的概述、SpringIOC入门（XML）、Spring的Bean管理、Spring属性注入

    记得引入约束 上图路径. 此时 只需修改配置文件 便可以随意更换实现类 无需修改代码. 传统方法必须用实现类(不面向接口了)来调用方法设置属性. 而在Spring中:在创建类的过程中发现实现类有nam ...

  4. MySQL的CURRENT_DATE()，NOW()，DATE_FORMAT()函数的应用，类型转换及操作汇总

    内容简介 datetime类型和timestamp类型的取值范围,CURRENT_DATE()函数应用,NOW()函数应用,DATE_FROMAT()函数取星期,日期.字符串.时间戳相互转换等. 时间 ...

  5. hdu6092(dp)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=6092 题意: 输入格式为, 对于每组测试样例第一行输入两个数 n, m, 接下来一行输入B数组, 有 ...

  6. 二进制数（dp，记忆化搜索）

    二进制数(dp,记忆化搜索) 给定k个<=1e6的正整数x(k不大于10),问最小的,能被x整除且只由01组成的数. 首先,dp很好写.用\(f[i][j]\)表示i位01串,模ki的值是j的数 ...

  7. Cogs 1264. [NOIP2012] 开车旅行（70分 暴力）

    1264. [NOIP2012] 开车旅行 ★★☆   输入文件:drive.in   输出文件:drive.out   简单对比时间限制:2 s   内存限制:128 MB [题目描述] 小A 和小 ...

  8. Pod中spec的字段常用字段及含义

    一.Pod中spec的字段常用字段及含义 1.pod.spec.containers ²  spec.containers.name <string>  #pod的名称,必须字段,名称唯一 ...

  9. vue-cli3.0 使用图形化界面创建和管理项目

    1.打开终端输入vue ui vue ui 2.创建项目 3.选择一套预设,点击创建项目按钮 4.等待安装 5.安装完成后 6.可以添加插件 7.项目依赖管理 8.项目配置管理 9.项目任务管理 10 ...

  10. Git练习2 使用码云