svg - 在鼠标滚轮上设置 viewBox(with Raphael) 以放大/缩小

Question

我用拉斐尔画了一些形状，比如矩形和圆形。这里：http: //jsfiddle.net/Ta8jQ/65/

缩放功能如下图：

function doZoom(coords, factor) {
   //transform real coordinates into viewbox coordinates
   debugger;
   x =  Number(viewbox[0]) + Number(coords.x / zoom);
   y =  Number(viewbox[1]) + Number(coords.y / zoom);

   if (factor < 0) {
     factor = 0.95;
   } else {
      factor = 1.05;
   }

   var z = ((zoom || 1) * factor) || 1;
   zoom = z;

   //zoom viewbox dimensions
   viewbox[2] = bbox.width / zoom;
   viewbox[3] = bbox.height / zoom;

   //transform coordinates to new viewbox coordinates
   viewbox[0] = x - coords.x / zoom;
   viewbox[1] = y - coords.y / zoom;

   paper.setViewBox.apply(paper, viewbox,true);
 }

我有一个“适合屏幕”按钮，如果它被绘制到视口之外（即可见的绘图区域），它会显示所有的形状。“第四圈”是一个以 (-50,-50) 为中心的圆。因此，单击“适合屏幕”时，所有形状都可见。

放大和缩小也是在鼠标滚轮上实现的，但我面临的问题是：在单击“适合屏幕”按钮之前，鼠标滚轮上的放大/缩小工作正常。但是当我单击“适合屏幕”按钮并尝试在任何点缩放..缩放级别突然变化。假设您首先缩小并单击适合屏幕并尝试使用鼠标滚轮缩放第一个圆圈。缩放处于先前状态（即缩小状态） .但是我需要缩放第一个圆圈，因为我的鼠标指针指向当前缩放级别的第一个圆圈（即缩放的拉伸级别）。

任何帮助表示赞赏。