1

我在 Raphael JS 中有几个嵌套集，我想在 Photoshop 中使用类似图层。也就是说：集合中的对象可能有自己的变换，并且作为集合的位置，它们在其中变得相对定位。并且 set 也可能有它自己的转变。

现在看来，当应用集合转换时，它只是分别对每个元素执行它，并且相对于页面具有绝对位置。

有了这种机制，我遇到了一个简单的问题：我有集合和矩形。然后我用 scale(0.5,0.5,0,0); 调整矩形的大小 然后我想拖动整个集合。我使用 set.translate(x,y) 执行拖动。结果，我得到的矩形移动速度比其他非缩放项目慢两倍。

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 回答