2013-02-19 56 views
1

很久以前我做了一個jsfiddle來演示如何放大到中心(http://jsfiddle.net/Y69nm/1/)。現在我想縮放到給定的點(光標),就像googleMap一樣,但不知道該怎麼做。我將實際的鼠標座標發送到用於縮放的功能。RaphaelJs ViewBox放大到點

這裏是小提琴: http://jsfiddle.net/Y69nm/3/

這裏是縮放功能:

function handle(delta, mousex, mousey) { 

    if (delta < 0) { 
     viewBoxWidth *= 0.95; 
     viewBoxHeight *= 0.95; 
    } else { 
     viewBoxWidth *= 1.05; 
     viewBoxHeight *= 1.05; 
    } 
    scale = paper.width/viewBoxWidth ; 
    console.log(scale); 
    // zoom to center 
    x = (paper.width/2) - (viewBoxWidth/2); 
    y = (paper.height/2) - (viewBoxHeight/2); 
    // i try to zoom to mouse cursor 
    var moveX = (mousex - (mousex * scale)); 
    var moveY = (mousey - (mousey * scale)); 
    x = 0 - moveX; 
    y = 0 - moveY; 
    paper.setViewBox(x, y, viewBoxWidth, viewBoxHeight); 
} 

回答

2

我可以讓你更接近一點:

 x = 0 - moveX/scale; 
     y = 0 - moveY/scale; 

這是你updated fiddle。然而,它縮放指出,一旦縮放,如果你移動到另一個點並縮放它跳躍。

更新(4-30-2012): 因爲我也需要這個,我進一步研究它以消除縮放到另一點時的跳動。這是Fiddle更新一次更完整的解決方案。