Как я могу комбинировать объекты в javascript-библиотеке Рафаэля?

Простите за длинный вопрос, но продолжаю. Я пытаюсь изменить формы перетаскивания вокруг демонстрации здесь:

http://raphaeljs.com/graffle.html

Демонстрация работает нормально. Что я хочу сделать, так это поместить слова внутри фигур и перемещать фигуру и текст как единый составной объект.

Вот код для создания объектов:

window.onload = function () {
    var dragger = function () {
        this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
        this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
        this.animate({"fill-opacity": .2}, 500);
    },
        move = function (dx, dy) {
            var att = this.type == "rect" ? {x: this.ox + dx, y: this.oy + dy} : {cx: this.ox + dx, cy: this.oy + dy};
            this.attr(att);
            for (var i = connections.length; i--;) {
                r.connection(connections[i]);
            }
            r.safari();
        },
        up = function () {
            this.animate({"fill-opacity": 0}, 500);
        },
        r = Raphael("holder", 640, 480),
        connections = [],
        shapes = [  r.ellipse(190, 100, 30, 20),
                    r.rect(290, 80, 60, 40, 10),
                    r.rect(290, 180, 60, 40, 2),
                    r.ellipse(450, 100, 20, 20)
                ];
    for (var i = 0, ii = shapes.length; i < ii; i++) {
        var color = Raphael.getColor();
        shapes[i].attr({fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 2, cursor: "move"});
        shapes[i].drag(move, dragger, up);
    }
    connections.push(r.connection(shapes[0], shapes[1], "#fff"));
    connections.push(r.connection(shapes[1], shapes[2], "#fff", "#fff|5"));
    connections.push(r.connection(shapes[1], shapes[3], "#000", "#fff"));
};

Я пробовал что-то вроде этого:

 myWords = [ r.text(190, 100,  "Hello"),
      r.text(480,100, "Good Bye")
    ];

и сделал корректировки в другом месте, чтобы он работал, но затем он просто перемещает текст и фигуры, но форма и текст никогда не отображаются в целом. Я могу переместить текст отдельно от фигуры и наоборот. Мне нужно, чтобы они были одним объектом. поэтому они двигаются вместе. Как я могу это сделать? Спасибо за любую помощь.

РЕДАКТИРОВАТЬ:

Я пробовал это:

  st.push(r.text (190, 100, "node1"), r.ellipse(190, 100, 30, 20)),
  st.push(r.text (290, 80, "Center"), r.rect(290, 80, 60, 40, 10)),
  st.push(r.text (290, 180, "node2"), r.rect(290, 180, 60, 40, 2)),
  st.push(r.text (450, 100, "node3"), r.ellipse(450, 100, 20, 20))

Но текст и форма не остались вместе, когда я перемещал форму. Текст просто не двигался.

РЕДАКТИРОВАТЬ: Я не могу получить стандартную демонстрацию на http://raphaeljs.com/graffle.html для работы с Chrome. IE работает.

43
задан suspectus 6 June 2013 в 18:17
поделиться