2012-06-01 56 views
1

我在Raphael JS中有几个嵌套集合,我想用photoshop中的图层。也就是说:集合中的对象可能有自己的转换,并且成为集合中的相对位置。也可能有它自己的转变。Raphael JS嵌套转换

现在看来,当应用设置变换时,它只是分别执行它到每个元素,并且绝对位置相对于页面。

有了这个机制,我遇到了这样一个简单的问题:我有它的集合和矩形。然后我调整规模的矩形(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"); 
    }); 
}); 

我该如何纠正这段代码,使我的矩形以相同的速度移动?


理论上的一切,我需要移动一组对象的同时是控制转化的顺序的方式。我还没有发现内置的解决方案,因此有一个小黑客工具,插入一组翻译“之前”转变that're已应用于元素:

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

回答