我該怎麼辦，圖像有移動？用戶將採取它，並用鼠標拉斐爾移動它javascript

Question

這是想法..

我想要把圖像...和用戶將要移動它，在他想要的任何部分，首先，我使用圖像

var R = Raphael("hello_world", 800, 800), 
elipse = R.image("mioo.jpg",100,200,100,300); 

現在用戶要看到圖像，鼠標，他打算把它和移動它，我該怎麼做呢？ ...

與最後的代碼，它doens't移動，我需要它移動..我該怎麼做？

Answer 1

圖像沒有cx cy屬性請參閱SVG Specification（Rafael使用SVG渲染圖形），您必須使用x和y屬性。

up = function() { 
    // restoring state 
    this.attr({opacity: .5}); 
}; 
var start = function() { 
    // storing original coordinates 
    this.ox = this.attr("x"); 
    this.oy = this.attr("y"); 
    this.attr({opacity: 1}); 
}, 
move = function (dx, dy) { 
    // move will be called with dx and dy 
    this.attr({x: this.ox + dx, y: this.oy + dy}); 
}, 
up = function() { 
    // restoring state 
    this.attr({opacity: .5}); 
}; 

或使用變換：

elipse.tx = 0; 
elipse.ty = 0; 
var start = function() { 
    this.attr({opacity: 1}); 
}, 
move = function (dx, dy) { 
    //This is quick hack to restore previous position - because translate use 
    //relative transformation 
    this.translate(-this.trx, -this.try); 
    this.translate(dx, dy); 
    this.tx = dx; 
    this.ty = dy; 
}, 
up = function() { 
    this.attr({opacity: .5}); 
}; 
elipse.drag(move, start, up);