Текст и изображение перемещаются вместе с помощью библиотеки Raphael.js .. ?? - PullRequest
Новая
       18

Текст и изображение перемещаются вместе с помощью библиотеки Raphael.js .. ??

1 голос
/ 24 января 2011

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

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

Ответы [ 2 ]

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

Попробуйте этот код: 

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

}
1 голос
/ 01 февраля 2011

Взгляните на Как я могу комбинировать объекты в библиотеке JavaScript Raphael? Она рассказывает вам все, что вам нужно знать, и даже немного больше.

...