在鼠标滚轮上设置viewBox(使用Raphael)可放大/缩小

时间:2013-06-30 11:18:59

标签: svg raphael

我使用Raphael绘制了一些像矩形和圆形的形状。 这里: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)的圆。因此,点击“适合屏幕”,所有形状都可见。

同样放大和缩小是在鼠标滚轮上实现的,但我遇到的问题是:在点击“适合屏幕”按钮之前,鼠标滚轮上的放大/缩小工作正常。但是当我点击“适合屏幕”按钮时,并尝试在任何点放大。缩放级别会突然改变。如果你有第一个缩小并点击适合屏幕并尝试使用鼠标滚轮缩放第一个圆圈。缩放处于先前状态(即缩放)我需要缩放第一个圆圈,因为我的鼠标指针正在按照当前缩放级别的第一个圆圈(即拉伸缩放级别)。

感谢任何帮助。

0 个答案:

没有答案