Question

您好我是HTML5 svg概念的新手，所以想通过创建游戏来学习它。刚刚在svg中创建了n个圆圈并限制了它的移动，现在我正试图从特定位置（cx，cy）射出一个圆圈，但看起来这个位置完全与现有的坐标不同步svg ...帮助我理解为什么会出现这个问题

使用的浏览器：Chrome（如果问题是浏览器的bcoz，则为in-case）

粘贴在整个代码的某些部分下面......

#svgBoard
        {           
            border:1px solid black;
            width:600px;
            height:500px;           
        }

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="svgBoard" preserveAspectRatio="none" viewbox="0,0,600,550"/>       
        <rect id = "tank" x="10" y="465" width="20" height="35" style="fill:red;stroke-width:2;stroke:black;">  
</svg>


<script type="text/javascript">
    var intCircles      = 1;
    var intRadius       = 20;
    var arrColors       = new Array("green","maroon","yellow","pink","lime","orange","red","darkblue");
    var intBoardXLeft   = 12;
    var intBoardYTop    = 13;       
    var intBoardXRight  = 288;
    var intBoardYBottom     = 210;
    var intBombFired    = 0;
    var xmlns = "http://www.w3.org/2000/svg";
    function fnMoveCircles(circleID)
    {   
        var objCircle = document.getElementById(circleID);

        if(objCircle == undefined) {return;}

        var x = parseInt(objCircle.getAttribute("cx"),10);
        var y = parseInt(objCircle.getAttribute("cy"),10);                      
        if ( x < intBoardXLeft )
        {
            var resetIncX = Math.floor((Math.random()*4)+1);
            resetIncX = Math.abs(resetIncX);
            objCircle.setAttribute("incX", resetIncX);
        }
        else if ( x > intBoardXRight)
        {
            var resetIncX = Math.floor((Math.random()*4)+1);
            resetIncX = resetIncX * -1;
            objCircle.setAttribute("incX", resetIncX);
        }

        if ( y < intBoardYTop)
        {
            var resetIncY = Math.floor((Math.random()*4)+1);
            resetIncY = Math.abs(resetIncY);
            objCircle.setAttribute("incY", resetIncY);
        }
        else if ( y > intBoardYBottom)
        {           
            var resetIncY = Math.floor((Math.random()*4)+1);
            resetIncY = resetIncY * -1;
            objCircle.setAttribute("incY", resetIncY);
        }   

        x = x + parseInt(objCircle.getAttribute("incX"),10);
        y = y + parseInt(objCircle.getAttribute("incY"),10);            
        objCircle.setAttribute("cx", x);
        objCircle.setAttribute("cy", y);

        var transformAttr = ' translate(' + x + ',' + y + ')';
            objCircle.setAttribute('transform', transformAttr);
        setTimeout("fnMoveCircles('" + circleID + "')",20);         
    }

    function getRandomX()
    {
        return Math.floor((Math.random()*intBoardXRight-intBoardXLeft)+1)+intBoardXLeft;
    }

    function getRandomY()
    {
        return Math.floor((Math.random()*intBoardYBottom-intBoardYTop)+1)+intBoardYTop;
    }

    function fireBomb()
    {
        var objBomb = document.getElementById("circleBomb");            
        var x = parseInt(objBomb.getAttribute("cx"),10);
        var y = parseInt(objBomb.getAttribute("cy"),10);
        y = y-1;

        if ( y < intBoardYTop)
        {           
            document.getElementById("svgBoard").removeChild(objBomb);
            intBombFired = 0;
        }
        else
        {
            objBomb.setAttribute("cy", y);
            setTimeout("fireBomb()",1);
        }

        for(intChk=0;intChk <= intCircles-1; intChk++)
        {   
            var objCheck = document.getElementById("svgcircle"+intChk);

            if ( objCheck != undefined )
            {
                var xchk = parseInt(objCheck.getAttribute("cx"),10);
                var ychk = parseInt(objCheck.getAttribute("cy"),10);

                if ((x >= xchk && x <= xchk+intRadius*2) && (y >= ychk && y <= ychk+intRadius*2))
                {objCheck.setAttribute("fill","black");                     
                    document.getElementById("svgBoard").removeChild(objCheck);
                    document.getElementById("svgBoard").removeChild(objBomb);
                    intBombFired = 0;
                    return;
                }
            }
        }
    }

    (function ($) {

            $(document).ready
            (                 
                function () {           

            //Create the circles
            for(intCreate=0;intCreate <= intCircles-1; intCreate++)
            {
                var objCircle = document.createElementNS(xmlns, "circle");      
                objCircle.setAttribute("id", "svgcircle" + intCreate);
                objCircle.setAttribute("cx", getRandomX());
                objCircle.setAttribute("cy", getRandomY());
                objCircle.setAttribute("r", intRadius );
                var rand = Math.floor((Math.random()*arrColors.length-1)+1);
                objCircle.setAttribute("fill", arrColors[rand].toString());
                objCircle.setAttribute("stroke-width","1px");
                objCircle.setAttribute("incX", Math.floor((Math.random()*4)+1));
                objCircle.setAttribute("incY", Math.floor((Math.random()*4)+1));                    
                $("#svgBoard").append(objCircle);
                setTimeout("fnMoveCircles('svgcircle" + intCreate + "')",20);                   
            }

            $("body").keydown
            (
                function (event) {

                    if (event.keyCode == 37 ){ //left arrow key

                        var objRect = document.getElementById("tank");
                        var x = parseInt(objRect.getAttribute("x"),10); 
                        if ( (x-3) > 3 )
                        {
                            objRect.x.baseVal.value = x-3;                              
                        }
                    }
                    else if (event.keyCode == 39){//right arrow key

                        var objRect = document.getElementById("tank");
                        var x = parseInt(objRect.getAttribute("x"),10);
                        if ( (x+3) + parseInt(objRect.getAttribute("width"),10) < 600 )
                        {                                   
                            objRect.x.baseVal.value = x+3;                          
                        }
                    }
                    else if (event.keyCode == 38 && intBombFired == 0) {//Up arrow key "THIS IS WHERE IM FACING THE PROBLEM"

                        var objNewBomb = document.createElementNS(xmlns, "circle");
                        var svg = document.querySelector("svgBoard");
                        //var objRect = document.getElementById("tank");                            

                        objNewBomb.setAttribute("id", "circleBomb");                            
                        objNewBomb.setAttribute("r", intRadius );                           
                        objNewBomb.setAttribute("fill", "black");                               
                        objNewBomb.setAttribute("stroke", "red");
                        objNewBomb.setAttribute("stroke-width","2px");
                        $("#svgBoard").append(objNewBomb);                          

                        objNewBomb.setAttribute("cx", getRandomX());
                        objNewBomb.setAttribute("cy", 210);

                        intBombFired = 1;
                        fireBomb();
                        alert (objNewBomb.getAttribute("cy"));
                    }                       
                }
            );
        }           
        )
    }) (jQuery);
</script>

Answer 1

为什么要同时设置圆的位置（cx，cy = x，y）并将圆圈换成相同的x，y值？你应该只需要做一个或另一个。

SVG Circle cx，cy在动态添加时有所不同

1 个答案: