Javascript 拖动时Raphael JS与墙的碰撞检测

我有以下代码用于在Raphael中拖动形状：

var start = function() {
        this.ox = 0;
        this.oy = 0;
        self.bringToFront();
    },
    move = function(dx, dy) {
        var a = self.getAngle(self.rotation),
            bb = self.shape.getBBox();

        switch(a){
            case 90:
                self.shape.translate(dy - this.ox, this.oy - dx);
                this.ox = dy;
                this.oy = dx;
                break;
            case 180:
                self.shape.translate(this.ox - dx, this.oy - dy);
                this.ox = dx;
                this.oy = dy;
                break;
            case 270:
                self.shape.translate(this.ox - dy, dx - this.oy);
                this.ox = dy;
                this.oy = dx;
                break;
            default:
                self.shape.translate(dx - this.ox, dy - this.oy);
                this.ox = dx;
                this.oy = dy;
        }
    },
    end = function() {
    };

（

self.shape

是一组拉斐尔路径和矩形）

---

我正在尝试获取它，以便您无法将形状拖出SVG画布区域。现在，我可以在

移动

函数中获取形状的边界框的坐标，

bb

变量。我试图为if（bb.x<10）添加一个检查。，但我不知道如何设置约束，使其说：“不要让它再向左移动”。我检查边界框的

x

位置，然后试图约束形状的

x

位置，这本身不是一个答案，但应该为您指出正确的方向

查看raphael 2.0参考资料，了解更多信息

它旁边的图像几乎完全符合您的要求。它背后的代码在文件中。如果搜索“Element.drag extra”，您将看到这段代码

(function (r) {
    var x, y;
    r.circle(15, 15, 10).attr(fill).drag(function (dx, dy) {
        this.attr({
            cx: Math.min(Math.max(x + dx, 15), 85),
            cy: Math.min(Math.max(y + dy, 15), 85)
        });
    }, function () {
        x = this.attr("cx");
        y = this.attr("cy");
    });

})(prepare("Element.drag-extra"));

在这里，Dmitry将阻力限制在最小15 px和最大85 px之间。应该可以使用一点DOM魔法来找到画布的大小，并相应地修改上面的代码

---

希望这能有所帮助。

这不管用吗<代码>如果（bb.x<10）bb.x=10否。我使用边界框上的x来检查位置，但我正在平移形状的x，y。如果有道理的话，为什么是“15”和“85”？我可以理解为什么“15”，但是“85”看起来像是从现在开始的，因为盒子是100x100，圆的半径是15。始终移动圆心，因此圆心的最小位置为0+半径（15），最大位置为100半径（85）。非常简单。

code r.圆（15,15,10）

半径设置为10。细节是一切，这一点仍然存在。15和85将圆约束在正方形内。如果我回去再看一遍，我可能会决定限制在10，90。说真的，考虑到我试图提供帮助，这是一个相当老套的评论。如果没有正确的圆半径，约束设置的逻辑将变得不清楚。你所要做的就是修改你原来的答案