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 回答