RaphaelJS, кажется, испытывает недостаток в иерархии форм - PullRequest
Новая
       11

RaphaelJS, кажется, испытывает недостаток в иерархии форм

2 голосов
/ 22 мая 2011

Рафаэлю, кажется, не хватает иерархий форм?

Я не могу создать меньший круг, прикрепленный к большему кругу, и знаю, что он будет масштабирован / переведен, когда будет больше.

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

Я что-то пропускаю?

Ответы [ 2 ]

2 голосов
/ 24 мая 2011

Это текущее поведение, так как Рафаэль не создает никакого реального элемента для "набора".

1 голос
/ 28 мая 2011

Если вы хотите включить Drag'nDrop для набора, вы можете использовать следующий код: 

Raphael.el.set_drag = function (aSet) {
    // Enable drag'n drop in a Set
    var startAll = function () {
        // storing original coordinates
        for (var i in this.set.items) {
            var comp = this.set.items[i];
            try {
                comp.attr({opacity: 0.3});
            } catch (ex) {;}
            if (comp.type == "path") {
                comp.ox = comp.getBBox().x;
                comp.oy = comp.getBBox().y;
            }
            else {
                comp.ox = comp.attrs.cx || comp.attrs.x;
                comp.oy = comp.attrs.cy || comp.attrs.y;
            }
        }
    },

    moveAll = function (dx, dy) {
        for (var i in this.set.items) {
            var comp = this.set.items[i];
            if (comp.attrs.cx)             // ellipse
                comp.attr({cx: comp.ox + dx, cy: comp.oy + dy});
            else if (comp.attrs.x)
                comp.attr({x: comp.ox + dx, y: comp.oy + dy});
            else            // path
                comp.translate(comp.ox - comp.getBBox().x + dx, comp.oy - comp.getBBox().y + dy);
        }
    },

    upAll = function () {
        for (var i in this.set.items) {
            var comp = this.set.items[i];
            if (comp.attrs.cx)             // ellipse
                comp.attr({cx: comp.ox, cy: comp.oy + dy});
            else if (comp.attrs.x)
                comp.attr({x: comp.ox, y: comp.oy + dy});
            else            // path
                comp.translate(comp.ox , comp.oy - comp.getBBox().y + dy);
            this.set.items[i].attr({opacity: 1});
        }
    };

    this.set = aSet; //create a "set" property on the element
    this.drag(moveAll,startAll,upAll);
    return this;    
}


// Create your elements
var first_element = paper.rect(10,10,100,50).attr({fill:'#f00'});
var second_element = paper.rect(30,300,100,50).attr({fill:'#0f0'});

// Add elements to your set
var myset = paper.set();
myset.push(first_element);
myset.push(second_element);

// Add handler on the elements
first_element.set_drag(myset);
second_element.set_drag(book_set);
...