Рафаэль JS обнаружение столкновения со стенами при перетаскивании - PullRequest
2 голосов
/ 19 октября 2011

У меня есть следующий код для перетаскивания фигур в Рафаэле:

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 в функции move.Я попытался добавить проверку для if(bb.x < 10)..., но я не знаю, как установить ограничение, чтобы сказать: «Не позволяйте ему двигаться дальше влево».Является ли проблемой то, что я проверяю положение x для ограничительной рамки, но затем пытаюсь ограничить положение x формы?

1 Ответ

2 голосов
/ 20 октября 2011

Это не ответ сам по себе, но он должен указывать вам правильное направление.

посмотрите ссылку на Raphael 2.0 для drag

Изображение рядом с ним делает в точности то, что вам нужно.Код этого файла находится в файле 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"));

Здесь Дмитрий ограничивает перетаскивание между минимумом 15 и максимумом 85 пикселей.Должна быть возможность использовать немного магии DOM, чтобы найти размер холста и соответствующим образом изменить приведенный выше код.

Надеюсь, это немного поможет.

...