Question

使用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);

和ZOOM：

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

但我遇到两个大问题。这是用于raphael创建的svg对象而不是图像......

首先，在变焦不平滑之后平移：我拖动一点，矩形移动了很多。随着我走得更远，运动变得更糟。当我缩放时，我可以以某种方式缩放拖动吗？
其次，我如何安排以便平移缩放的矩形不会让我将其移出视口？在jquery中，我可以使用约束来做到这一点，并且我尝试使用上面的set.translate函数来包含约束但是我无处可去......

任何建议都会受到赞赏，或者在Raphael.js中已经存在这样做的库？我看了一下raphael-spz，它似乎没有解决我上面的任何一个问题。

我想要的基本上就是http://dannyvankooten.com/demo/draggable-image-map-with-zoom/，但对于拉斐尔来说。他正在使用jquery ui draggable ......我似乎无法在拉斐尔工作。

谢谢！

Answer 1

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

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是视图框相对于论文的不同因素。即（200/500)

在raphael.js中拖动约束并缩放

1 个答案: