Каков наиболее эффективный способ размещения изображений в радиальном направлении с использованием JavaScript?

Question

Я ломал голову над тем, как заставить это работать.Я не могу найти примеров этого и на самом деле нет предыдущих вопросов.В основном у меня есть 121 миниатюрное изображение (с точно такими же размерами), я размещаю их в виде сетки с желобами, и я хочу взять первое изображение и поместить его в центр.(это позволяет использовать сетку изображений 11x11). Затем я хотел бы взять каждое следующее изображение и начать располагать их вокруг центрального изображения, используя ближайший доступный свободный участок к центральному изображению, пока все не израсходовано.Предполагается, что список изображений будет получен из объекта массива.Какой самый эффективный способ сделать это?

Answer 1

Скорее всего, это не самый эффективный способ решения этой проблемы, но я хотел поиграть с ним:

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

// Setup constants
var arraySize = 11;
var centerPoint = {x:5, y:5};

// Calculate the Euclidean Distance between two points
function distance(point1, point2) {
    return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
}

// Create array containing points with distance values
var pointsWithDistances = [];
for (var i=0; i<arraySize; i++) {
    for (var j=0; j<arraySize; j++) {
        var point = {x:i, y:j};
        point.distance = distance(centerPoint, point);
        pointsWithDistances.push(point);
    }
}

// Sort points by distance value
pointsWithDistances.sort(function(point1, point2) {
    return point1.distance == point2.distance ? 0 : point1.distance < point2.distance ? -1 : 1;
});

Полученный массив pointsWithDistances будет выглядеть следующим образом:

[
    {x:5, y:5, distance:0},
    {x:4, y:5, distance:1},
    {x:5, y:4, distance:1},
    ...
    {x:4, y:4, distance:1.4142135623730951},
    {x:4, y:6, distance:1.4142135623730951},
    ...
    {x:3, y:5, distance:2},
    ...
]

Итерируя помассив в таком порядке, вы эффективно заполняете сетку из центра наружу.

(Спасибо за идею Андреаса Карлбома, как отобразить эту структуру.)

ПроверьтеРазница с использованием прямолинейных расстояний:

// Rectilinear Distance between two points
function distance(point1, point2) {
    return Math.abs(point1.x - point2.x) + Math.abs(point1.y - point2.y);
}

Для подобной оболочке структуры алгоритмических подходов вы можете использовать Maximum Metric:

// 'Maximum Metric' Distance between two points
function distance(point1, point2) {
    return Math.max(Math.abs(point1.x - point2.x), Math.abs(point1.y - point2.y));
}

Вы можете поиграть с кодом здесь: http://jsfiddle.net/green/B3cF8/