Raphaeljs клон и перетащить - PullRequest
Новая
       0

Raphaeljs клон и перетащить

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

У меня есть несколько кругов, которые я использую в качестве перетаскиваемых кнопок, я могу назначить им события перетаскивания, и они будут работать правильно, но я хочу клонировать И перетаскивать их, поэтому я получаю несколько кнопок (до требуется). Как мне клонировать, а затем перетащить клонированный объект?

Это то, что у меня есть 

var a = r.circle(20, 50, 15)
// drag handler
        var start = function(x,y,event) {
            this.ox = this.attr("cx");
            this.oy = this.attr("cy");
            this.animate({r: 20, opacity: .25}, 500, ">");
        },
        move = function(dx, dy) {
            this.attr({cx: this.ox + dx, cy: this.oy + dy});
        },
        up = function () {
            this.animate({r: 15, opacity: .5}, 500, ">");
        };
a.drag(move, start, up);

Я пробовал разные вещи, клонируя 'a', клонируя 'this' в начале, но мои знания JS ограничены, поэтому любая помощь будет оценена.

Спасибо!

Ответы [ 3 ]

3 голосов
/ 21 октября 2011

Попробуйте использовать объекты.

Я создал объект для инкапсуляции объекта Raphael и функций перетаскивания, которые будут на нем использоваться. 

function Button(ix,iy,ir)
{
// grab a reference to the objects "this"
var that = this;
that.a = r.circle(ix, iy, ir).attr({"fill":"red"})
// drag handler
    that.start = function(x,y,event) {
        that.a.ox = this.attr("cx");
        that.a.oy = this.attr("cy");
        that.a.animate({r: 20, opacity: .25}, 500, ">");
    }
   that.move = function(dx, dy) {
        that.a.attr({cx: that.a.ox + dx, cy: that.a.oy + dy});
    }
   that.up = function () {
        that.a.animate({r: 15, opacity: .5}, 500, ">");
    };
that.a.drag(that.move,that.start,that.up);
return that;
}

Здесь важно захватить "this "ссылка на переменную и использование переменной для ссылки на нее в функциях перетаскивания.

Причина, по которой это делается, заключается в том, что при перетаскивании называются" move "," start "и" up ", объект thisне будет ссылаться на ваш объект.«Это» часто меняется.Используя «то», вы блокируете объект для использования в этих методах.

Вот лучшее объяснение «что = это».(Обязательно проголосуйте в один прекрасный день за отличным объяснением)

Вот скрипка , которая создает две кнопки, которые вы можете перетаскивать независимо.

Надеюсь, что поможет

3 голосов
/ 22 октября 2011

Мое собственное решение использует мышиный ход, см. Мой jsfiddle

Он клонирует в начале движения, mousedown, mouseup, щелчок не работает, но это делает 

a.mousemove(clone_handler);
var clone_handler = function() {
var x = this.clone();
x.drag(move, start, up);
0 голосов
/ 20 октября 2011

Не уверен, что у Рафаэля есть функция клонирования для общего узла, но клонирование круга можно выполнить вручную, выполнив что-то вроде 

var circle = r.circle(x, y, r);
var clone = r.circle(circle.cx, circle.cy, circle.r);
clone.attr({ attr1: circle.attr1, ...);

Редактировать: aparent, вы можете просто вызвать круг.clone () вместо выполнения вышеупомянутого ( Element.clone )

Что касается клонирования при перетаскивании, это может быть не так просто, как после начала перетаскивания, я полагаю, вы не можетеизменить перетаскиваемый объект.Ваши альтернативы здесь могут быть:

  • Клонировать круг при начале перетаскивания, перетащить оригинальный элемент и оставить копию на прежнем месте (это плохая идея, если к оригиналу присоединены обработчики событийitem)
  • Выполните действия, описанные выше, но поменяйте положение оригинала и копии после окончания перетаскивания (это может вызвать мерцание)
  • Найдите способ программной отмены перетаскивания оригинального элемента и триггераперетаскивание его копии, в то же время заботясь о том, чтобы это не переросло в бесконечную рекурсию
...