Question

我想创建一个带有按钮的页面，点击该按钮会生成具有随机大小和颜色的三种形状之一 - 矩形，圆形或三角形。

我编写了实现此功能的代码，但每次生成一个形状时，它都会显示最后一个形状的创建位置。也许这与形状的起点有关？

我一直在努力解决这个问题，并且没有成功地搜索答案

如何让每个形状彼此相邻，而不是最后一个形状？澄清一下 - 创建形状时，它会出现在最后一个形状的旁边或上方，而不是。

（在这个实现中，三角形每次都是相同的大小 - 请忽略它）

(function() {
    var shape;
    var svg = document.getElementById('svg');
    var colorsArr = ['none', 'green', 'red', 'yellow', 'blue', 'black', 'pink', 'grey', 'purple'];
    var color;

    // event listener on the button
    document.getElementById("generateShapeBtn").addEventListener("click", function() {
        var randomNumberForShape = Math.floor(Math.random() * (1 + 2) + 1 );

        // triangle
        if (randomNumberForShape === 1) {
            shape = document.createElementNS("http://www.w3.org/2000/svg", "polygon");

            // random Size's
            color = Math.floor(Math.random() * (9));

            shape.setAttribute("points","30,4 4,60 60,60");
            shape.setAttribute("fill", colorsArr[color]);
           
            svg.appendChild(shape);
        }

        // circle
        else if (randomNumberForShape === 2) {

            shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");

            // random Size's
            var cx = Math.floor(Math.random() * (30 - 1) + 1);
            var cy = Math.floor(Math.random() * (30 - 1) + 1);
            var r = Math.floor(Math.random() * (30 - 1) + 1);
            color = Math.floor(Math.random() * (9));

            shape.setAttribute("cx", " " + cx + " ");
            shape.setAttribute("cy", " " + cy + " ");
            shape.setAttribute("r", " " + r + " ");
            shape.setAttribute("fill", colorsArr[color]);

            shape.style.padding = 10;
           }
      
        // rectangle
        else {
            shape = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            var x = Math.floor(Math.random() * (100 - 50) + 50);
            var y = Math.floor(Math.random() * (100 - 50) + 50);
            var width = Math.floor(Math.random() * (100 - 50) + 50);
            var height = Math.floor(Math.random() * (100 - 50) + 50);
            color = Math.floor(Math.random() * (9));

            shape.setAttribute("y", "" + y + "");
            shape.setAttribute("x", "" + x + "");
            shape.setAttribute("width", "" + width + "");
            shape.setAttribute("height", "" + height + "");
            shape.setAttribute("fill", colorsArr[color]);

            svg.appendChild(shape);
        }
    });
})();

button {
    margin-bottom:15px;
}

svg {
    margin:auto;
    width:90%;
    height:500px;
    border:2px solid green;
    padding:10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
    <button id="generateShapeBtn" type="button"> Generate Shape </button>
    <svg id="svg">

    </svg>
<script src="main.js" type="text/javascript"> </script>
</body>
</html>

Answer 1

如果您希望您的形状在某个水平线上居中，则不要随意生成Y坐标。为你的地平线选择一个Y坐标，并从中减去一半的形状高度。

＆＃13;

(function() {
    var shape;
    var svg = document.getElementById('svg');
    var colorsArr = ['none', 'green', 'red', 'yellow', 'blue', 'black', 'pink', 'grey', 'purple'];
    var color;
    var horizonY = 100;

    // event listener on the button
    document.getElementById("generateShapeBtn").addEventListener("click", function() {
        var randomNumberForShape = Math.floor(Math.random() * (1 + 2) + 1 );

        // triangle
        if (randomNumberForShape === 1) {
            shape = document.createElementNS("http://www.w3.org/2000/svg", "polygon");

            // random Size's
            color = Math.floor(Math.random() * (9));

            shape.setAttribute("points","30,4 4,60 60,60");
            shape.setAttribute("fill", colorsArr[color]);

            svg.appendChild(shape);
        }

        // circle
        else if (randomNumberForShape === 2) {

            shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");

            // random Size's
            var r = Math.floor(Math.random() * (30 - 1) + 1);
            var cx = Math.floor(Math.random() * (30 - 1) + 1);
            var cy = horizonY;
            color = Math.floor(Math.random() * (9));

            shape.setAttribute("cx", " " + cx + " ");
            shape.setAttribute("cy", " " + cy + " ");
            shape.setAttribute("r", " " + r + " ");
            shape.setAttribute("fill", colorsArr[color]);

            svg.appendChild(shape);
        }

        // rectangle
        else {
            shape = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            var width = Math.floor(Math.random() * (100 - 50) + 50);
            var height = Math.floor(Math.random() * (100 - 50) + 50);
            var x = Math.floor(Math.random() * (100 - 50) + 50);
            var y = horizonY - (height/2);
            color = Math.floor(Math.random() * (9));

            shape.setAttribute("y", "" + y + "");
            shape.setAttribute("x", "" + x + "");
            shape.setAttribute("width", "" + width + "");
            shape.setAttribute("height", "" + height + "");
            shape.setAttribute("fill", colorsArr[color]);

            svg.appendChild(shape);
        }
    });
})();

＆＃13;

button {
    margin-bottom:15px;
}

svg {
    margin:auto;
    width:90%;
    height:500px;
    border:2px solid green;
    padding:10px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
    <button id="generateShapeBtn" type="button"> Generate Shape </button>
    <svg id="svg">

    </svg>
<script src="main.js" type="text/javascript"> </script>
</body>
</html>

＆＃13;

另请注意，padding和margin等HTML属性对SVG中的元素无效。它们没有效果。

Answer 2

我要做的是将它们并排排列，即创建xOffset和yOffset值。生成形状时，会更新偏移值。您可能还想创建一个间距变量常量，这样无论形状的宽度如何，它始终与最后一个形状保持相同的距离。 xOffset值将随着您的进展而不断增加。对于每个生成，xOffset = xOffset + Xmargin + shape width。还将另一个值存储在一个等于绿色框宽度的变量中。当xOffset + Xmargin + next shape's width > box width - ＆gt; xOffset = 0+margin＆amp; yOffset = tallest shape's height + Ymargin。我无法理解你是如何产生高度的位置的。

另一种选择是创建一个带有白色边框的表格（或者背景为w / e颜色），然后迭代地将每个形状附加到表格单元格中。由于随机高度和宽度，每个形状的距离会有所不同，但这是一个稍微简单的解决方案

位置随机形状

2 个答案: