Uzun bir soru ama söyleyeceğim için üzgünüm. Demo etrafında sürükleyin şekiller burada değiştirmek için çalışıyorum:

http://raphaeljs.com/graffle.html

Demo gayet iyi çalışıyor. Yapmak istediğim şey bu şekiller içinde, kelimeleri ve şekli taşımak ve etrafında bileşik tek bir nesne olarak metin.

İşte nesneleri oluşturmak için: kod

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"));
};

Böyle bir şey denedim:

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

ve işe yarayacağını, böylece başka Ayarlamalar yaptı, ama o zaman sadece metin ve şekiller hareket ediyor ama şekil ve metin asla bir bütün olarak görülür. Metin şekli ayrı ve tam tersi şekilde hareket edebiliyorum. Onları bir nesne olması gerekiyor. beraber hareket ediyorlar. Bunu nasıl yapabilirim? Herhangi bir yardım için teşekkür ederiz.

DÜZENLEME:

Bunu denedim:

  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))

Ama metin ve şekil şekil taşındığımda hep birlikte kalın değil. Metin sadece hareketsiz kaldı.

EDİT: veremem http://raphaeljs.com/graffle.html stok demo Chrome ile çalışmaya başlayın. Çalışıyor YANİ.

Büyük daha zarif bir şekilde ilişkilendirmek öğeleri düzenleme yaptı.

Setsiyi gruplandırma Raphael nesneler, ama kümeleri oluşturmak kendi elemanları, olamaz sürükle ve bırak bir set, ne zamandan beri tıklayın tuval ya da şekli seçin veya metin, ama asla seti (beri yok set element).

Here is a simple jsFiddle showing the properties of a set.Bir dizi x 11 ** özellikleri yok olduğunu unutmayın.

Raphael documentation:

[C]reates dizi gibi unsurlar ve birkaç kez devam işletmek için nesne.Uyarı: sayfayı kendisi için herhangi bir öğe oluşturmak değil.

Basit bir geçici çözüm, her iki metin ve şekli ayrı ayrı sürüklenebilir. İlişkili metin şekli ile birlikte hareket... ... ve ilgili metinle birlikte şekil.

Bu gibi nesneleri ilişkilendirme basit... bir özellik oluşturun. Bu durumda, her şekil ve her metin ilgili öğe için bir başvuru olan bir özellik .pair çağırdı.

Nasıl yapılır:

var i, ii, tempS, tempT
     shapes = [  ... ],
     texts = [  ... ];
for (i = 0, ii = shapes.length; i < ii; i  ) {
    tempS = shapes[i].attr( ... );
    tempT = texts[i].attr( ...);

      // Make all the shapes and texts dragable
    shapes[i].drag(move, dragger, up);
    texts[i].drag(move, dragger, up);

      // Associate the elements
    tempS.pair = tempT;
    tempT.pair = tempS;
}

Ve sonra sürükle ve bırak kod olan move(), dragger() up() fonksiyonlar her zaman emin olun uğraşmak hem tıklanma öğesi ve ilişkili element.

Örneğin burada move() işlevin önemli bir parçasıdır. Not text olabilir ele aynı şekilde rectangle (değişen nitelikler x y) false durumda her Javascript koşullu operatörler aşağıda kolları her iki durum için rectangle text

move = function (dx, dy) {

      // Move main element
    var att = this.type == "ellipse" ? 
                           {cx: this.ox   dx, cy: this.oy   dy} : 
                           {x: this.ox   dx, y: this.oy   dy};
    this.attr(att);

      // Move paired element
    att = this.pair.type == "ellipse" ? 
                            {cx: this.pair.ox   dx, cy: this.pair.oy   dy} : 
                            {x: this.pair.ox   dx, y: this.pair.oy   dy};
    this.pair.attr(att);
    ...
}

Ve aşağıda tam çalışan kod:

Working jsFiddle example of draggable text and shapes

Raphael.fn.connection = function (obj1, obj2, line, bg) {
    if (obj1.line && obj1.from && obj1.to) {
        line = obj1;
        obj1 = line.from;
        obj2 = line.to;
    }
    var bb1 = obj1.getBBox(),
        bb2 = obj2.getBBox(),
        p = [{x: bb1.x   bb1.width / 2, y: bb1.y - 1},
        {x: bb1.x   bb1.width / 2, y: bb1.y   bb1.height   1},
        {x: bb1.x - 1, y: bb1.y   bb1.height / 2},
        {x: bb1.x   bb1.width   1, y: bb1.y   bb1.height / 2},
        {x: bb2.x   bb2.width / 2, y: bb2.y - 1},
        {x: bb2.x   bb2.width / 2, y: bb2.y   bb2.height   1},
        {x: bb2.x - 1, y: bb2.y   bb2.height / 2},
        {x: bb2.x   bb2.width   1, y: bb2.y   bb2.height / 2}],
        d = {}, dis = [];
    for (var i = 0; i < 4; i  ) {
        for (var j = 4; j < 8; j  ) {
            var dx = Math.abs(p[i].x - p[j].x),
                dy = Math.abs(p[i].y - p[j].y);
            if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) {
                dis.push(dx   dy);
                d[dis[dis.length - 1]] = [i, j];
            }
        }
    }
    if (dis.length == 0) {
        var res = [0, 4];
    } else {
        res = d[Math.min.apply(Math, dis)];
    }
    var x1 = p[res[0]].x,
        y1 = p[res[0]].y,
        x4 = p[res[1]].x,
        y4 = p[res[1]].y;
    dx = Math.max(Math.abs(x1 - x4) / 2, 10);
    dy = Math.max(Math.abs(y1 - y4) / 2, 10);
    var x2 = [x1, x1, x1 - dx, x1   dx][res[0]].toFixed(3),
        y2 = [y1 - dy, y1   dy, y1, y1][res[0]].toFixed(3),
        x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4   dx][res[1]].toFixed(3),
        y3 = [0, 0, 0, 0, y1   dy, y1 - dy, y4, y4][res[1]].toFixed(3);
    var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
    if (line && line.line) {
        line.bg && line.bg.attr({path: path});
        line.line.attr({path: path});
    } else {
        var color = typeof line == "string" ? line : "#000";
        return {
            bg: bg && bg.split && this.path(path).attr({stroke: bg.split("|")[0], fill: "none", "stroke-width": bg.split("|")[1] || 3}),
            line: this.path(path).attr({stroke: color, fill: "none"}),
            from: obj1,
            to: obj2
        };
    }
};

var el;
window.onload = function () {
    var color, i, ii, tempS, tempT,
        dragger = function () {
                // Original coords for main element
            this.ox = this.type == "ellipse" ? this.attr("cx") : this.attr("x");
            this.oy = this.type == "ellipse" ? this.attr("cy") : this.attr("y");
            if (this.type != "text") this.animate({"fill-opacity": .2}, 500);

                // Original coords for pair element
            this.pair.ox = this.pair.type == "ellipse" ? this.pair.attr("cx") : this.pair.attr("x");
            this.pair.oy = this.pair.type == "ellipse" ? this.pair.attr("cy") : this.pair.attr("y");
            if (this.pair.type != "text") this.pair.animate({"fill-opacity": .2}, 500);            
        },
        move = function (dx, dy) {
                // Move main element
            var att = this.type == "ellipse" ? {cx: this.ox   dx, cy: this.oy   dy} : 
                                               {x: this.ox   dx, y: this.oy   dy};
            this.attr(att);

                // Move paired element
            att = this.pair.type == "ellipse" ? {cx: this.pair.ox   dx, cy: this.pair.oy   dy} : 
                                               {x: this.pair.ox   dx, y: this.pair.oy   dy};
            this.pair.attr(att);            

                // Move connections
            for (i = connections.length; i--;) {
                r.connection(connections[i]);
            }
            r.safari();
        },
        up = function () {
                // Fade original element on mouse up
            if (this.type != "text") this.animate({"fill-opacity": 0}, 500);

                // Fade paired element on mouse up
            if (this.pair.type != "text") this.pair.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)
                ],
        texts = [   r.text(190, 100, "One"),
                    r.text(320, 100, "Two"),
                    r.text(320, 200, "Three"),
                    r.text(450, 100, "Four")
                ];
    for (i = 0, ii = shapes.length; i < ii; i  ) {
        color = Raphael.getColor();
        tempS = shapes[i].attr({fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 2, cursor: "move"});
        tempT = texts[i].attr({fill: color, stroke: "none", "font-size": 15, cursor: "move"});
        shapes[i].drag(move, dragger, up);
        texts[i].drag(move, dragger, up);

        // Associate the elements
        tempS.pair = tempT;
        tempT.pair = tempS;
    }
    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"));
};​

Bütünlüğü için burada kodudurthe linked to jsFiddle for showing the properties of a set:

window.onload = function () {
    var paper = Raphael("canvas", 320, 200),
        st = paper.set(), 
        propArr = [];

    st.push(
        paper.circle(10, 10, 5),
        paper.circle(30, 10, 5)
    );

    st.attr({fill: "red"});

    for(var prop in st) {
        if (st.hasOwnProperty(prop)) {
            // handle prop as required
            propArr.push(prop   " : "   st[prop]);
        }
    }
    alert(propArr.join("\n"));
};​

// Output:
// 0 : Raphael's object
// 1 : Raphael's object
// items : Raphael's object,Raphael's object
// length : 2
// type : set