在拉斐尔.js和缩放中拖动约束

drag constraints in raphael.js and zoom

本文关键字:缩放 拖动 约束 js      更新时间:2023-09-26

我使用 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 函数来包含约束,但我一无所获......

任何建议将不胜感激,或者已经存在一个图书馆在拉斐尔.js中这样做?我看了 raphael-spz,它似乎没有解决我上面的任何问题。

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

谢谢!

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

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)