Question

我正在构建一个360度图像旋转器，我需要按特定顺序加载图像。原因是，可能会有很多图像，我们需要从大多数角度加载尽可能多的图像，同时提供尽可能多的对象视图，而不会使旋转过于生涩。

如果我们有360度图像以1度角度差异捕获对象，我将如何从1-360开始按顺序拍摄图像数组并重新排列，以在索引180处加载图像，然后加载90度，然后45度，依此类推。

图片数组：

var images = [image_001.jpg, image_002.jpg, ...image_475.jpg];

例如，我需要找出序列中的下一个数组索引。我需要按以下顺序加载索引：1,180,360,90,135,225,315,45等......

如果有人知道这个代表的算法的名称，那将是有用的，以及示例。

感谢阅读。

Answer 1

如果数组已按其“度”排序，则您无需重新排列它们，只需更改它们的访问方式。

var images = [], numImages = 360;
for (var i = numImages; i > 0; i = Math.floor(i / 2)) { // or i >>= 1
    // get image at i
}

这将循环显示360 180 90 45 22 11 5 2 1

修改：

为了改善这个循环以便它以不同的间隔循环，你可以像这样循环：

function asyncAddToArray(arr, index, val) { return function() { arr[index] = val; } } var images = [], loadedImages = [], numImages = 360; for (var j = numImages; j > 0; j >>= 1) { for (var i = 0; i < numImages; i += j) { if (!images[i]) { var img = images[i] = new Image(); img.onload = asyncAddToArray(loadedImages, i, true); img.src = "images_" + (i < 100 ? i < 10 ? "00" + i : "0" + i : i) + ".jpg"; } } }

这将允许您以更零星的顺序加载，这样您的用户仍然可以在所有图像加载的同时查看“较少blury”的3D图像。

数字将采用以下格式：0 180 90 270 45 135 225 315 22 44 66 88 110 132 ... 359
（要查看完整序列，请参阅this JSFiddle。）

注意：您需要使用loadedImages来识别可向用户显示的“最近”图像，i可能会偏移1如果您的文件名从1开始而不是0。

Answer 2

算法？哦，拜托，这是3年级的数学;）

// this is an array.. with n images..
var images = [....];

// this is the angle, which is a value between 0 and 359
var angle = 0...359;

// this is a mathematical expression
var currentImageIdx = Math.round((360 / (images.length - 1)) * angle)

基于360度重新排列阵列

2 个答案: