1

Raphael で一連のオブジェクトをドラッグ可能にしたい場合がよくありますが、.transform()そうするのは面倒です。次のように開始するとします。

var paper = Raphael(0, 0, 500, 500);
var set = paper.set();
set.push(paper.circle(100,100,35), paper.circle(150,150,15));    
set.attr("fill", "orange");
set.data("myset", set);

set.drag(
    function(dx, dy, x, y, e) {
        this.data('myset').transform("T" + dx + "," + dy);
    },
    function(x, y, e) {},
    function(e) {}
);

これを試してみると、一度動作することがわかります。しかし、ドラッグして停止し、再度ドラッグすると、元の位置に対して相対的に 0,0 に位置がリセットされます.transform().。

この質問の変形がここで触れられており、回答者は変換の先頭に「...」を付けることを提案しました。それはすべて問題ありませんが、次の 2 つの点で問題ありません。

  • の呼び出しのたびに (dx,dy) によって変換したくないため、以前の位置を追跡する必要がありdragmoveます。これにより、オブジェクトが画面から飛び出します。
  • オブジェクトを何度もドラッグすると、モンスター トランスフォームが作成されるのではないかと心配しています。（多分私はすべきではありませんが。）

私の暫定的な解決策は、次のように、別のキーと値のペアで元の位置からのオフセットを追跡することです。

var paper = Raphael(0, 0, 500, 500);

var set = paper.set();
set.push(
    paper.circle(100,100,35),
    paper.circle(150,150,15)
);    
set.attr("fill", "orange");
set.data("myset", set);
set.data("position", [0,0]);
var current_position = [0,0];

set.drag(
    function(dx, dy, x, y, e) {
        this.data('myset').transform("T" + (this.data("position")[0] + dx) + "," + (this.data("position")[1] + dy));
        current_position = [dx,dy];
    },
    function(x, y, e) {

    },
    function(e) {
        this.data('myset').data("position", [
            this.data("position")[0] += current_position[0],
            this.data("position")[1] += current_position[1]
        ]);
    }
);

ここで実際の動作を見ることができます。

機能しますが、信じられないほどずさんな感じがします。明らかな何かが欠けているに違いありませんよね？

4

1 に答える 1

0

私の答えはあなたの最後の変種に似ています:

var onmove = function (dx,dy){
    this.transform(this.default_transform+'T'+dx+','+dy); 
},
  onstart = function (){
    this.default_transform = this.transform();
},
  onend = function(){
    this.default_transform = this.transform();
};

set.drag(onmove, onstart, onend);

Raphael はすべてを 1 つの完全なマトリックス変換に変換するため、オブジェクトを移動するたびにそれが蓄積されることはありません。

于 2013-03-23T09:58:27.453 に答える