使用 Raphael.js 库一起移动文本和图像..??答案

【问题标题】：Text and image moving together using the Raphael.js library..??使用 Raphael.js 库一起移动文本和图像..??
【发布时间】：2011-06-14 05:43:13
【问题描述】：

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

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

【问题讨论】：

请使用 { } 按钮格式化代码。这次我已经为你做到了。
但是@angel 请不要重复。改为编辑您现有的问题，以便将其放到首页。

标签： javascript image project raphael

【解决方案1】：

看看How can I combine objects in the Raphael javascript library?它告诉你所有你需要知道的，甚至更多。

【讨论】：

【解决方案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);

}

【讨论】：