javascript - 在 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/如果需要，它将需要更复杂的东西来让更多的矩形以不同的角度移动。

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

});