1

I want to have a moving image and a text that moves too. So when I move the image, the text moves too as one!! How do I do this? I have made the image move with this code but how do I add the text?? 

var R = Raphael("hello_world", 800, 800),

elipse = R.image("mioo.jpg",100,200,100,300);

var start = function () {    
  this.ox = this.attr("x");         
  this.oy = this.attr("y");         
  this.animate({r: 70, opacity: .25}, 500, ">");     
},
move = function (dx, dy) {
  this.attr({x: this.ox + dx, y: this.oy + dy});     
},
up = function () {
  this.animate({r: 50, opacity: .5}, 500, ">");
};

elipse.drag(move, start, up);
Cees Meijer
  • 742
  • 2
  • 8
  • 23
angel
  • 4,474
  • 12
  • 57
  • 89
  • Please use the { }-button for formating code. I've done that for you this time. – Oswald Jan 24 '11 at 01:06
  • But @angel please do not ask duplicates. Edit your existing question instead so it gets bumped to the front page. – Pekka Jan 24 '11 at 01:12

2 Answers2

1

Have a look at How can I combine objects in the Raphael javascript library? It tells you everything you need to know, and even a little more.

Community
  • 1
  • 1
Adam Holmes
  • 1,783
  • 3
  • 20
  • 32
1

Try this code:

var warehousesNodes = new Array();  
var warehousesText = new Array();  
var radius=30;
var initx=radius*1.5;
var interdistance=10;
var i=0;
for(i=0; i<warehouses.length; i++){
    warehousesNodes[i] = paper.circle(initx, i*interdistance+i*radius*2+initx, radius).attr({
        gradient: '90-#FFFFFF-#64a0c1',  
        stroke: '#64a0c1',  
        cursor: 'pointer',
        'stroke-width': 1,  
        'stroke-linejoin': 'round'  
    });
    warehousesText[i] = paper.text(warehousesNodes[i].attr("cx"), 
                                   warehousesNodes[i].attr("cy"), 
                                   warehouses[i]).attr({ 
        cursor: 'pointer'
    });
    warehousesNodes[i].pair=warehousesText[i];
    warehousesText[i].pair=warehousesNodes[i];
    var start = function () {
        // storing original coordinates
        this.ox = this.attr("cx");
        this.oy = this.attr("cy");
        this.attr({opacity: 0.5});
        this.pair.hide();
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({cx: this.ox + dx, cy: this.oy + dy});
    },
    up = function () {
        // restoring state
        this.pair.attr({x: this.attr("cx"), y: this.attr("cy")});
        this.pair.show();
        this.attr({opacity: 1});
    };
    warehousesNodes[i].drag(move, start, up);
    //warehousesText[i].drag(move, start, up);

}
Jacinto Obispo
  • 11
  • 1