javascript - 使用 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 Carlbom 提出如何显示此结构的想法。)

检查使用直线距离的区别:

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