[Front-End] Canvas使用滑鼠滾輪縮放

Canvas提供了scale()可以達到zoom inzoom out的效果,但很殘酷的是中心點只能在最左上,因此必須使用translate()做出位移。

先去下載jquery-mousewheel插件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$("#myCanvas").mousemove(function (e) {
mouse_x = e.pageX + document.documentElement.scrollTop;
mouse_y = e.pageY + document.documentElement.scrollLeft;
});
$(function(){
$("#myCanvas").mousewheel(function(event, delta){
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+moved_x,(parseFloat(data[i].latitude)-baselati)*disratio+moved_y,(parseFloat(data[i].RSSI))*(-1)*levelratio,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
}
var scaleratio = 0.1 ;
if ( delta > 0)
cxt.translate((-1)*mouse_x*scaleratio, (-1)*mouse_y*scaleratio);
else if ( delta < 0 )
cxt.translate(mouse_x*scaleratio, mouse_y*scaleratio);
cxt.scale(1+(delta*scaleratio),1+(delta*scaleratio));
});
});

原來看似平凡的動作,做起來還真不簡單 …