Question

我想要一个移动的图像和一个移动的文本。因此，当我移动图像时，文本也会像一个一样移动！我该怎么做呢？我已经使用此代码移动图像但是如何添加文本？

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

Answer 1

查看How can I combine objects in the Raphael javascript library?它会告诉您需要了解的所有信息，甚至更多信息。

Answer 2

试试这段代码：

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

}

使用Raphael.js库移动文本和图像.. ??

2 个答案: