2

使用 PAN 使用 Raphael.js 2.0 获得基本的缩放/平移效果没有问题：

set = ( // set of elements, contained in a rectangle)
var start = function () {
        set.oBB = set.getBBox();
},
move = function (dx, dy) {
        var bb = set.getBBox();
                set.translate(set.oBB.x - bb.x + dx, set.oBB.y - bb.y + dy);
},
up = function() { // do stuff };
set.drag(move, start, up);

和缩放：

//before 
paper.setViewBox(0,0, 500,500, false);
//after
paper.setViewBox(0,0, 200, 200, false);

但我有两个大问题。这是针对拉斐尔创建的 svg 对象而不是图像...

  • 首先，缩放后平移不是“平滑”：我拖动一点，矩形移动了很多。我走得越远，运动就越糟糕。缩放后可以以某种方式缩放拖动吗？
  • 其次，我该如何安排，以便平移缩放的矩形不会让我将其移出视口？在 jquery 中，我可以使用约束来执行此操作，并且我尝试使用上面的 set.translate 函数来包含约束，但我无处可去......

任何建议将不胜感激，或者在 Raphael.js 中已经存在用于执行此操作的库？我查看了 raphael-spz，它似乎没有解决我上面的任何一个问题。

我想要的基本上是这个http://dannyvankooten.com/demo/draggable-image-map-with-zoom/但对于 Raphael。他正在使用 jquery ui draggable ... 我似乎无法在 Raphael 工作。

谢谢！

4

1 回答 1

2

因为您已经缩放了视图框，所以您可能还需要缩放拖动值，为了计算边界，您可以与视口进行比较，例如，

move = function (dx, dy) {
        var bb = set.getBBox(),
            //Move relative to viewport scale
            x = dx/scale,
            y = dy/scale,
            //Lower bounds
            xf = Math.max(0, set.oBB.x - bb.x + x),
            yf = Math.max(0, set.oBB.y - bb.y + y);
         //upper bounds
         xf = Math.min(viewBoxWidth, xf + bb.width) - bb.width;
         yf = Math.min(viewBoxHeight, yf + bb.height) - bb.height;

         set.translate(xf, yf);
}

scale是您的视图框相对于您的纸张不同的因素。IE（200/500)

于 2012-06-04T19:22:05.357 回答