0

Raphael.jsについての非常に具体的な質問をもう一度します。私がやりたいことは、長方形が互いに押し合うことです。次のような状況があり、各長方形が横に並んだ例の写真であり、中央のものを大きく変形させたとしましょう。

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

どうすればそれを処理できますか、他のものは変換のように正しく離れます。すべてを手作業で変換してみましたが、問題は、私のマークアップがそれほど単純ではないことです。

前もって感謝します。

4

1 に答える 1

0

コードを見ずに特定の答えを知ることは困難であり、マークアップの問題や、数値を計算するためにいくつかの数学をどのように結び付けることができるかを知ることは困難ですが、より複雑になる可能性がありますが、四角形によって移動した量を計算できる場合があります元の四角形の新しい幅と比較して。これは、おそらくアプローチできる1つの方法の例を示しています... jsfiddle here http://jsfiddle.net/R8avm/3/ 編集：最後のx、yを並べ替えることができるいくつかの基本的な数学を持つ更新されたフィドルがあります立方体がどちらの方向にあるかがわかっている場合。

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

});
于 2013-10-19T08:05:50.420 に答える