Question

如何使用javascript在QML中创建这样的东西？

实际上我知道如何在QML中创建矩形但是想要做这样的事情。 QML画布可以是任何大小，但是无论何时加载QML部分，都会生成具有随机大小和颜色的多个正方形而不重叠。当我尝试这样做时，矩形以列表形式生成。我是一个Web开发人员（ruby on rails oriented）但是对这些javascript的东西很新。任何帮助将不胜感激。

Answer 1

正如@ddriver已经注意到的，最简单的决定是遍历所有孩子，找到一个新的矩形空间。

Rectangle {
        id: container
        anchors.fill: parent
        property var items: [];
        Component {
            id: rect
            Rectangle {
                color: Qt.rgba(Math.random(),Math.random(),Math.random(),1);
                border.width: 1
                border.color: "#999"
                width: 50
                height: 50
            }
        }

        Component.onCompleted: {
            var cnt = 50;
            for(var i = 0;i < cnt;i ++) {
                for(var t = 0;t < 10;t ++) {
                    var _x = Math.round(Math.random() * (mainWindow.width - 200));
                    var _y = Math.round(Math.random() * (mainWindow.height - 200));
                    var _width = Math.round(50 + Math.random() * 150);
                    var _height = Math.round(50 + Math.random() * 150);

                    if(checkCoord(_x,_y,_width,_height)) {
                        var item = rect.createObject(container,{ x: _x, y: _y, width: _width, height: _height });
                        container.items.push(item);
                        break;
                    }
                }
            }
        }

        function checkCoord(_x,_y,_width,_height) {
            if(container.items.length === 0)
                return true;
            for(var j = 0;j < container.items.length;j ++) {
                var item = container.children[j];
                if(!(_x > (item.x+item.width) || (_x+_width) < item.x || _y > (item.y+item.height) || (_y+_height) < item.y))
                    return false;
            }
            return true;
        }
    }

是的，这不是一个明智的解决方案，但仍然可以改进。

Answer 2

如果你想要效率，它将以复杂性为代价 - 你将不得不使用一些空间分区算法。否则，你可以生成随机值，直到你得到足够的不重叠。

检查两个矩形是否重叠很简单 - 如果矩形B的任何一个角都不在矩形A内，那么它们不会重叠。如果角度/点的x和y值分别在矩形的x和宽度以及y和高度的范围内，则角点/点在矩形内。

在JS DocumentId中会给出0到1之间的数字，所以如果要创建一个50到200之间的随机值，可以通过Math.random()来实现。

有一个数组，向其添加初始矩形值，然后生成新的矩形值，检查它们是否与数组中已有的重叠，如果不是 - 也将它们添加到数组中。获得足够的矩形值后，继续创建实际的矩形。由于您的所有矩形都是正方形，因此每个方格只能使用3个值 - x，y和大小。

创建随机颜色的随机矩形，不重叠

2 个答案: