Как я могу остановить наложение элементов с помощью JavaScript и библиотеки Raphael JavaScript

Question

Я генерирую несколько круглых элементов произвольного размера, используя библиотеку Raphael JavaScript, но из-за того, что многие круглые элементы генерируются случайно, они перекрываются или перекрывают друг друга. Что я хотел знать, есть ли способ с JavaScript, чтобы сказать, находится ли один элемент уже в определенной позиции, чтобы избежать наложения? По сути, я хочу создать на холсте случайные элементы случайного размера, которые не перекрывают друг друга или не перекрывают друг друга.

Здесь я создал пару тестовых файлов, чтобы дать вам представление о том, что я делаю. Первый генерирует случайные объекты, а вторая ссылка устанавливает их в сетку, чтобы остановить перекрытие.

http://files.nicklowman.co.uk/movies/raphael_test_01/

http://files.nicklowman.co.uk/movies/raphael_test_03/

Answer 1

Ваши примеры не работают для меня, поэтому я не могу представить ваш точный сценарий.

Прежде чем вы "уроните" элемент на холст, вы можете запросить позиции других ваших элементов и сделать некоторые вычисления, чтобы проверить, будет ли новый элемент перекрываться.

Очень простой пример этой концепции с использованием элементов круга может выглядеть следующим образом:

function overlap(circ1, circ2) {
    var attrs = ["cx", "cy", "r"];
    var c1 = circ1.attr(attrs);
    var c2 = circ2.attr(attrs);
    var dist = Math.sqrt(Math.pow(c1.cx - c2.cx ,2) + Math.pow(c1.cy - c2.cy, 2));
    return (dist < (c1.r + c2.r));
}
var next_drop = paper.circle(x, y, r);  
for (var i in circles) {
    if (overlap(next_drop, circles[i])) {
        // do something
    }
}

Конечно, вычислить, где вы собираетесь поместить круг после того, как вы определили, что он перекрывается с другими, немного сложнее.

Answer 2

Самый простой способ - создать объект и придать ему отталкивающую силу, которая уменьшается до нуля на его краю. Когда вы уроните эти объекты на холст, они будут отталкиваться друг от друга, пока не достигнут точки равновесия.