0

私がここでやろうとしているのは、小さな画像を追加すると、体の周りを移動するということです..しかし、問題は、小さな画像をsvgボックス内で動かしたかった.. SVG ID を追加し、画像を追加します.. SVG ボックスから移動します.. いくつかのコーディングを見逃したのではないでしょうか?

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

/*var svg = d3.select("main").append("svg:svg")
.attr("width", w)
.attr("height", h);
*/



$('#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(-11,11),
top: '+=' + randomRange(-11,11)


s /* Extra */
//if (x < 0 || x > w) SVG.vx *= -1;
//if (y < 0 || y > h) SVG.vy *= -1;



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

HTML 本文:

        <div id="box">
    <SVG xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" id="main" style="border:solid 1px #000000;width:515;height:474;">
        <image xlink:href="Pictures/PondEnvironment/pond.png" x="0" y="0" width="513" height="474" />
</SVG>
      </div>

助けてくれてありがとう！

4

1 に答える 1

1

アニメーション時にプレデターを SVG 内に保持したい場合は、毎回新しい位置を確認する必要があります。このフィドルは役立つはずです：

http://jsfiddle.net/DJg36/18/

また、アニメーションが完全に終了しているとは思いません。つまり、キューに入れ始めていて、混乱を引き起こしている可能性があるため、もう一度アニメーション化する前に stop() を呼び出す必要があります。

したがって、次のようなものが必要です。

$('#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)
        });

        var containerWidth = $("svg").width() - 25; // Minus the width of the img
        var containerHeight = $("svg").height() - 25; // Minus the width of the img

        if (interval) clearInterval(interval);
        interval = setInterval(function() {

            for (var i = 0; i < num; i++) {
                var randomLeft = randomRange(-11, 11);
                var randomTop = randomRange(-11, 11);

                var predator = $('#predator' + i);
                var predatorLeft = parseInt(predator.css("left"));
                var predatorTop = parseInt(predator.css("top"));


                if (predatorLeft + randomLeft <= 0) randomLeft = 11;
                if (predatorLeft + randomLeft >= containerWidth) randomLeft = -11;

                if (predatorTop + randomTop <= 0) randomTop = 11;
                if (predatorTop + randomTop >= containerHeight) randomTop = -11;

                predator.stop();
                predator.animate({
                    left: '+=' + randomLeft,
                    top: '+=' + randomTop
                }, 100);
            }
        }, 100);
        num++;
    });

お役に立てれば！

アンディ

于 2012-05-27T11:10:01.163 に答える