0

ズーム時にこれらのボックス間のギャップを維持するのを手伝ってくれる人はいますか?マルチメディア/グラフィックスを行ったことがある人なら誰でも、このアルゴリズムが必要であることを知っていると思います

私はそれのために別のフィドルを作成しました。 http://jsfiddle.net/p9BJ8/

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
</head>
<body>
    <div id="canvas">
        <div id="innercanvas">
            <div class="square" style="top:30px; left:30px; width:40px; position:absolute; height:40px; background-color:red"></div>
            <div class="square" style="top:100px; left:90px; width:40px; position:absolute; height:40px; background-color:red"></div>
        </div>
    </div>

    <input type="submit" id="ZoomIn" value="+" />

    <script type="text/javascript">
        var zoom = 40;
        $(document).ready(function () {

            $('#ZoomIn').bind('click', function () {
                zoom = zoom + 5;
                $("#innercanvas .square").each(function (index) {

                    $("#innercanvas").width($("#innercanvas").width + 5);
                    $("#innercanvas").height($("#innercanvas").height + 5);

                    var id = $(this).attr("id");


                        var _offset = $(this).offset();
                        $(this).offset({ top: _offset.top + 5, left: _offset.left + 5 });
                        $(this).width(zoom);
                        $(this).height(zoom);                   
                });
            });    
        });

    </script>
</body>
</html>
4

1 に答える 1

0

この更新されたフィドルを参照してください：http：//jsfiddle.net/p9BJ8/1/

1行だけ変更しました：

$(this).offset({ top: _offset.top + 5*index, left: _offset.left + 5*index });

変数はindex関数コールバックから取得され、ループの反復回数と同じです。つまり、1回目は5 * 1で、2回目は5*2です。したがって、2番目の正方形は5ではなく左に10移動します。これは、最初の正方形が5移動し、サイズが5増加するために必要です。

編集

OPのコメントに応えて、これはオブジェクト間の距離をオブジェクトのサイズの一定の割合に保ちます：http: //jsfiddle.net/p9BJ8/6/

次の関数を作成して、初期の「ギャップパーセンテージ」を計算しました。これは、単純に、、gap's width / square's widthおよびgap's height / square's heightです。私たちは実際にはJavaScriptを使用して基本的な計算を行っているだけなので、関数が十分に明確であることを願っています。

function getGapPercentage(){
    var squares = $("#innercanvas .square");
    var s1 = squares.eq(0);
    var s2 = squares.eq(1);
    var s1top = parseInt(s1.css('top'), 10);
    var s2top = parseInt(s2.css('top'), 10);
    var s1left = parseInt(s1.css('left'), 10);
    var s2left = parseInt(s2.css('left'), 10);
    var h = s1.height();
    var w = s1.width();
    var gapH = s2top - h - s1top;
    var gapW = s2left - w - s1left;
    var gapPercents =  {
        top: gapH / h,
        left: gapW / w
    };

    return gapPercents;
}

そこから、正方形の新しい位置を設定する線を変更するだけです。

$(this).offset({
    top: _offset.top + (5 + 5*gapPercents.top) * index,
    left: _offset.left + (5 + 5*gapPercents.left) * index
});

イベント内で関数を再度.click()呼び出していgetPercentage()ますが、パーセンテージが同じままであることを（コンソールの出力を介して）表示するだけであることに注意してください。それらが実際にわずかに変化しているように見えるという事実を心配しないでください。これは、ブラウザが1ピクセルの何分の1かで変更できないため、ギャップの割合が元の値からわずかに外れる場合があります。ただし、常に元のパーセンテージに非常に近くなります。

于 2013-02-03T20:17:19.037 に答える