0

SVGサイズの幅と長さを測定する方法を教えてください。そこから、すべての画像要素がSVG内でのみ移動するように制限および制限したいと思います。

私のSVG名は「メイン」ですが、画像が側面に到達したときに領域から移動しないようにバウンス領域を設定するにはどうすればよいですか？

現在、SVGに表示する画像をさらに設定すると、どういうわけかSVGから移動します。それをチェックする方法はありますか？

      <!-- ******************** Animation ******************** -->  

        $(window).load(function(){
        $(document).ready(function(e) {
        var num = 0;
        var interval;


        $('#add').click(function(e) {
        $('#box').append('<div class="predator" id="predator'+ num + '"><img src="Pictures/PondSpecies/anchovies.png"></div>');
        $('#predator'+num).css({
        left: randomRange(500,150),
        top: randomRange(400,150)
        });

        if (interval)
        clearInterval(interval);
        interval = setInterval (function () {
        for (var i=0; i<num; i++) {
            $('#predator'+i).animate ({
                    left: '+=' + randomRange(-6,7),
                    top: '+=' + randomRange(-6,7)
            }, 100);
            }
            }, 100);
            num++;
            });
            $('#remove').click(function(e) {
            num--;

            $('#predator' + num).remove();

            if (num == 0 && interval)
            clearInterval(interval);
            });
            });


            /* FUNCTIONS */
            function randomRange(min, max) {
            return Math.random() * (max-min) + min;
            }
            });  


        <!-- ******************** Animation ******************** -->

編集::

この3つのチェックを入れようとしましたが、どういうわけかうまくいきません、チェック...

function outOfBounds(point, boundary) {
    return point.y > boundary.top
    || point.y < boundary.bottom + 200
    || point.x < boundary.getLeftBoundAt(point.y)+500
    || point.x > boundary.getRightBoundAt(point.y)+500;
}

function getLeftBoundAt(y) {
    return this.slope * y + this.base + 300;
}

function getTopBoundAt(x) {
    var segment = this.topSegmentAt(x);
    return segment.origin.y + segment.slope * (x - segment.origin.x);
}
4

1 に答える 1

1

まず第一に、 2つのイベントのデカラレーションは必要ありませんが、1つだけ保持してください。最も安全なのは、DOM対応イベントです。

$(window).load(function(){
    $(document).ready(function(e) {
    }
}

これを使って

$(document).ready(function(e) {
}

または、最短バージョンが必要な場合は、単に使用できます

$(function(e) {
}

第二に、あなたはSVGアニメーションについて言及していますが、私があなたのコードでしか見ることができないのは単純なCSSアニメーションです...

参考までに、これもCSSアニメーションです：http ：//themble.com/bones

さて、あなたの境界に関しては、通常、現在のWebページの幅と高さに設定しますが、これは常に開発者がアニメーションに何を求めているかを正確に知るためのものであり、単にストリップのようなサイズが必要な場合もあります。 。

あなたが持っていると仮定して：

<div id="svg"></div>

描画領域を次のように設定します。

 svg = Raphael("svg", 
              $("#svg").width(), 
              $("#svg").height());

ここではデモンストレーションのためにRaphaelを使用していることに注意してください。RaphaelJsを使用していない場合は、独自のライブラリを使用します。

于 2012-05-27T08:59:12.417 に答える