1

Raphael JSには、フォトショップのレイヤーのように使用したいネストされたセットがいくつかあります。つまり、セット内のオブジェクトには独自の変換があり、セットへの場所であるため、オブジェクトはセット内で比較的配置されます。そして、セットにはそれ自身の変換もあるかもしれません。

これで、セット変換が適用されると、各要素に対して個別に、ページに対する絶対位置でそれを実行するように見えます。

その仕組みで、私はそのような単純な問題に遭遇します：私はその中に集合と長方形を持っています。次に、scale（0.5,0.5,0,0）;で長方形のサイズを変更します。そして、セット全体をドラッグしたいと思います。set.translate（x、y）を使用してドラッグを実行します。その結果、他のスケーリングされていないアイテムよりも2倍遅く移動する長方形が得られます。

var rdr = this;
this.paper = Raphael(0,0,1000,1000);
this.set = this.paper.set();
this.set.push(this.paper.rect(0,0,100,100)); // non-scaled rectangle
this.set.push(this.paper.rect(0,0,100,100).scale(0.5,0.5,0,0)); // scaled rectangle
$("body").bind("mousedown.RDR",function(e) {
  var ox = e.pageX;
  var oy = e.pageY;
  $("body").bind("mousemove.RDR",function(e) {
    rdr.set.translate(e.pageX-ox,e.pageY-oy);
    ox = e.pageX;
    oy = e.pageY;
  }).bind("mouseup.RDR",function() {
    $("body").unbind("mouseup.RDR").unbind("mousemove.RDR");
  });
});

長方形を同じ速度で移動させるには、このコードをどのように修正する必要がありますか？

理論的には、オブジェクトのセットを同時に移動するために必要なのは、変換の順序を制御する方法だけです。組み込みのソリューションが見つからないため、要素にすでに適用されている一連の「BEFORE」変換の変換を挿入する小さなハックがあります。

Raphael.el.translateBefore = function(x,y) {
  var matrix = this.matrix;
  var transform = matrix.toTransformString();
  transform = ("t"+x.toString()+","+y.toString()) + "," + transform;
  this.transform(transform);
  return this;
}

this.paper = Raphael(this.containerId,this.paperWidth,this.paperHeight);
// добавляем метод для raphael.set через жопу, не нашел нормальный способ
this.paper.set().__proto__.translateBefore = function(x,y) {
  _.each(this,function(el) {
    el.translateBefore(x,y);
  });
  return this;
}
4

1 に答える 1

6

http://raphaeljs.com/reference.html#Element.transform

// if you want you can append or prepend transformations
el.transform("...t50,50");
el.transform("s2...");
于 2012-06-06T14:27:53.500 に答える