どうすれば画像が動いていますか？ユーザーはそれを取って、マウスのラプラタブルでそれを移動するつもりです

Question

これは考えです..

私はイメージを入れたい...とユーザーは、彼が望む任意の部分でそれを移動するつもりです、最初のiは、画像

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

は今ユーザーが、彼はそれを取ると、それを移動し、私はそれをどのように行うかしようとしているマウスで、画像を見るために起こっているでしょうか？ ...

最後のコードでは、移動しません。動かす必要があります。どうすればいいですか？

Answer 1

イメージには、xxとyの属性を使用する必要があります。SVG Specification（ラファエルがSVGを使用してグラフィックスを表示する）のcx cy属性はありません。

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