Каков наиболее эффективный способ упорядочивания изображений радиально с помощью 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}, 
    ... 
] 

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

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

Заканчивать разницу с помощью прямолинейного Расстояния:

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

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

// '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/