使用HTML5 canvas做地图（3）图片加载平移放大缩小
http://www.cnblogs.com/HPhone/
终于开始可以写代码了，手都开始痒了。这里的代码仅仅是在chrome检测过，我可以肯定的是IE10以下浏览器是行不通，我一直在考虑，是不是使用IE禁止看我的篇博客，就是这群使用IE的人，给我加了很多工作量。
一个地图的基本动作，无非就是加载数据，平移，放大与缩小。这篇博客主要是通过一张图片的方式来模拟一下。
我这里认为大家都稍微了解甚至熟悉canvas的一些API，就不具体说，每一个参数代表什么意思了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!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>
|
|
1
2
3
4
5
|
var
canvas,context;
function
int(){
canvas=document.getElementById(
'canvas'
);
context=canvas.getContext(
'2d'
);
}
|
| 图片加载 |
创建一个图片对象之后，图片不能马上绘制到canvas上面，因为图片还没有加载完成。所以我们需要监听图片对象加载完事件，然后再去绘制。
|
1
2
3
4
5
6
7
8
9
10
|
var
img,
//图片对象
imgIsLoaded
//图片是否加载完成;
function
loadImg(){
img=
new
Image();
img.onload=
function
(){
imgIsLoaded=
true
;
//draw image
}
img.src=
"map.jpg"
;
}
|
| 图片绘制 |
绘制图像一个函数就可以搞定，但是需要记录这个图像的左上角坐标以及缩放比例。
|
1
2
3
4
5
|
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监听。
- 首先监听鼠标mousedown事件，等事件发生之后，再监听鼠标mousemove事件和mouseup事件
- mousemove事件发生之后，获得鼠标移动的位移，相应的图片的位置改变多少
- mouseup事件发生之后，取消对mousemove以及mouseup事件监听
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
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
};
}
|
| 图片缩放 |
其实缩放很简单，稍微复杂的是，如何让鼠标成为放大或者缩小的中心。如果数学几何不好，计算公式就可能看不明白了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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();
}
|
这个时候，基本功能就实现了，加载一张图片和加载多张图片都差不多，维护每一张图片的位置和大小，下面来整理一下代码吧。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
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
};
}
|
551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
