Question

我再次提出一个关于Raphael.js的非常具体的问题。我想做的是，矩形互相推挤。让我说我有以下情况：每个矩形并排example picture，我让中间的那个变换大：

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

我该如何处理它，其他的就像转换一样正确地移动。我通过手工改造来尝试它，但问题是，我的标记不是那么简单。

提前致谢。

Answer 1

很难在没有看到任何代码的情况下知道具体答案并且知道标记问题是什么，或者如何将数学与计算数字联系起来，它可能会更复杂，但您可能能够计算出移动的数量通过rects比较原始rect的新宽度。这显示了一个你可以接近它的方法的例子... jsfiddle here 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);
        };

});

在Raphael.js中让对象相互推挤

1 个答案: