使对象在Raphael.js中相互推动

Question

关于Raphael.js的一个非常具体的问题，我再次向我提出。 我想做的是，这些矩形相互挤压。 假设我有以下情况，每个矩形都是并排的示例图片，而让中间的矩形变大：

r.click(function() { r.animate({ width: 100, height: 100 }, 500); });

我该如何处理，使其他对象像转换一样正确地移开。 我已经尝试过手动转换，但是问题是，我的标记不是那么简单。

提前致谢。

Answer 1

在不查看任何代码，不知道标记问题或如何将一些数学公式用于计算数字的情况下，很难知道一个特定的答案，这可能会更复杂，但是您可以计算出矩形的移动量。与原始矩形的新宽度相比。 这显示了一种可能的方法示例... jsfiddle此处http://jsfiddle.net/R8avm/3/编辑：有一个更新的小提琴，其中包含一些基本数学运算法则，可以算出x，y的结尾如果您知道立方体的方向，请参见。http://jsfiddle.net/R8avm/4/如果需要，它将需要更多复杂的东西才能使更多的rect以不同的角度移动。

<div id="container"></div>

paper = Raphael( "container",400,400);
var rects = [ [ 100,50,50,50, 150,50 ],  //x,y,w,h,newx,newy
          [ 50,100,50,50,  50,150 ],
          [ 50,0,50,50, 50, -50 ],
          [ 0,50,50,50, -50,50 ],
        ];  

var newRects = new Array(4);           

var r = paper.rect(50,50,50,50).attr({ fill: '#123' });

for (var a=0; a<rects.length; a++) {
         newRects[a] = paper.rect( rects[a][0], rects[a][1], rects[a][2], rects[a][3]);
};

r.click(function() { 
   r.animate({ width: 150, height: 150, x: 0, y: 0 }, 500);               
         for (var a=0; a<rects.length; a++) {
             newRects[a].animate({ x: rects[a][4] , y: rects[a][5]   }, 500);
        };

});