Web►Front-End

[Front-End] Canvas拖曳移動地圖

由於專題需要，嘗試做一個地圖出來，這才知道原來如此簡單的功能做起來這麼崩潰 …

由於Canvas就像潑出去的水，如果我們想要做什麼改變就必須重新畫過。

按下滑鼠
1
2
3
4
5
$("#myCanvas").mousedown(function (e) {
	press_mouse_x = mouse_x;
	press_mouse_y = mouse_y;
	mouse_press = true ;
});
放開滑鼠
1
2
3
4
5
6
7
$("#myCanvas").mouseup(function (e) {
	moved_x += move_x ;
	moved_y += move_y ;
	move_x = 0 ;
	move_y = 0 ;
	mouse_press = false ;
});
滑鼠移動
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("#myCanvas").mousemove(function (e) {
	mouse_x = e.pageX + document.documentElement.scrollTop;
	mouse_y = e.pageY + document.documentElement.scrollLeft;
	if ( mouse_press === true ){
		move_x = mouse_x-press_mouse_x ;
		move_y = mouse_y-press_mouse_y ;
		cxt.clearRect ( (-1)*c.width , (-1)*c.height , c.width*2, c.height*2 );
		for ( var i = 0 ; i < data.length ; i ++ ){
			cxt.fillStyle="#FF0000";
			cxt.beginPath();
			cxt.arc((parseFloat(data[i].longitude)-baselong)*disratio+(move_x+moved_x),(parseFloat(data[i].latitude)-baselati)*disratio+(move_y+moved_y),(parseFloat(data[i].RSSI))*(-1)*levelratio,0,Math.PI*2,true);
			cxt.closePath();
			cxt.fill();
		}
	}
});

雖然有種重新做輪子的感覺，但感覺挺充實的。