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

57
3

Цель следующего кода - перетащить любой из двух прямоугольников и поддерживать их связь с линией. Однако, как вы можете видеть в jsfiddle, линия перемещается куда угодно. Что не так с этим кодом?

Это HTML

<div id="canvas"></div>

И это javascript

window.onload = function() {

var paper = Raphael("canvas", 600, 600);
var rect1 = paper.rect(100, 100, 100, 100 ).attr({"fill":"blue"});
var rect2 = paper.rect(400, 100, 100, 100 ).attr({"fill":"green"});

rect1.node.id = "rect1";
rect2.node.id = "rect2";

var x1=200, y1=150, x2=400, y2=150;
var line = paper.path(['M', x1, y1, 'L', x2, y2]);

var start = function () {
// storing original coordinates
this.ox = this.attr("x");
this.oy = this.attr("y");
},
move = function (dx, dy) {
// move will be called with dx and dy
this.attr({x: this.ox + dx, y: this.oy + dy});

if ( this.node.id == "rect1" ) {
x1 += dx;
y1 += dy;
}
else if ( this.node.id == "rect2" ) {
x2 += dx;
y2 += dy;
}
line.attr("path", ['M', x1, y1, 'L', x2, y2]);
},
up = function () {
// restoring state
};

rect1.drag(move, start, up);
rect2.drag(move, start, up);

};

спросил(а) 2014-05-16T20:26:00+04:00 6 лет, 5 месяцев назад
1
Решение
70

Что ж,

Вы можете получить ограничительную рамку квадратов, используя

Element.getBBox();

метод и вычислить значения пути из этого

        if ( this.node.id  == "rect1" ) {
var bb=rect1.getBBox();
x1=bb.x2;
y1=bb.y+(bb.height/2);
}
else if ( this.node.id == "rect2" ) {
var bb2=rect2.getBBox();
x2=bb2.x;
y2=bb2.y+(bb2.height/2);
}

Сценарий: http://jsfiddle.net/wrJKm/2/

ответил(а) 2014-05-16T21:23:00+04:00 6 лет, 5 месяцев назад
42

Редактировать: оригинал не совсем работал, когда оба были перемещены, я обновился, чтобы использовать атрибуты this.ox и this.oy, которые работают последовательно. Fiddle также полностью обновлен.

dx и dy являются относительными от исходного положения, иначе они всегда будут иметь значения в диапазоне от -1 до 1, чтобы указывать каждый раз, когда он перемещался. Это означает, что ваши оригинальные x1, y1... и т.д. Перемещаются все дальше и дальше. Вместо этого вы должны сохранять исходные позиции постоянными и просто изменять их с помощью dx, dy:


http://jsfiddle.net/tQ9av/2/

if ( this.node.id  == "rect1" ) {
n_x1 = this.ox + dx + 100;
n_y1 = this.oy + dy + 50;
}
else if ( this.node.id == "rect2" ) {
n_x2 = this.ox + dx;
n_y2 = this.oy + dy + 50;
}
line.attr("path", ['M', n_x1, n_y1, 'L', n_x2, n_y2]);

ответил(а) 2014-05-16T20:43:00+04:00 6 лет, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема