javascript - Raphael JS 拖动时与墙壁的碰撞检测

Question

我有以下用于在 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 Canvas 区域。现在我能够获取形状边界框的坐标，bb move 中的变量功能。我试图为 if(bb.x < 10)... 添加支票但我不知道如何将约束设置为:“不要让它向左移动”。我正在检查 x 的位置是否有问题？对于边界框，然后尝试约束 x形状的位置？

Answer 1

这本身不是答案，但应该为您指明正确的方向。

查看 drag 的 raphael 2.0 引用

它旁边的图像几乎完全符合您的要求。它背后的代码在 reference.js 中文件。如果你搜索“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 像素和最大 85 像素之间。应该可以使用一点 DOM 魔法来找到 Canvas 的大小并相应地修改上面的代码。

希望对您有所帮助。