javascript中的数组错误

Question

要完全理解这一点，请注意这一点； `当页面加载时，它获取图像的区域（宽度 * 高度）并为该区域中的所有位置创建所有 x,y 位置。

这很好用。

当我有来自 pos x,y 的另一个区域并且还有一个区域（宽度 * 高度）时，应该从第一个列表中弹出位置，以便它可以分隔两个区域。

我注意到的一个小错误是我得到了与所选区域水平的小线条，并且它们并没有延伸太远。我相信原因是不是在图像内制作一个干净的正方形，而是每行偏移一两个像素。

这是https://youtu.be/v1b6dEmfxQw行为的视频

因此，由于已经有一个所有位置列表，因此此代码创建了数组的克隆并删除了位置。

var drop_boxes = $('.drop-box');
var area_grid = [];
var image_width = $('.img-class')[0].naturalWidth;
var image_height = $('.img-class')[0].naturalHeight;

drop_boxes.each(function() {
var position = $(this).position();
var width =  $(this).width();
var height = $(this).height();
var positions_clone = positions.slice(0);
//console.log(positions_clone.length);

var top_offset = parseInt((position['top'] * image_width)/img_width);
var left_offset = parseInt((position['left'] * image_height)/img_height);

position['top'] = top_offset;
position['left'] = left_offset;

var width_offset = parseInt((width * image_width)/img_width);
var height_offset = parseInt((height * image_height)/img_height);

var width_counter = 0;
var height_counter = 0;

var area = width_offset * height_offset;
console.log(position);
console.log(width_offset);
console.log(height_offset);           

if (position['top'] < image_height-1 && position['left'] < image_width) {
    for (counter = 0; counter < area; counter++) {       
        var pos = [parseInt(position['left']+width_counter), parseInt(position['top']+height_counter)];

        var index = positions.findIndex(function(item) {
          // return result of comparing `data` with `item`

          // This simple implementation assumes that all `item`s will be Arrays.
          return pos.length === item.length && item.every(function(n, i) { return n === pos[i] });
        });

        //console.log(pos);

        if (index > -1) {
            positions_clone.splice(index, 1);
        }

        //area_grid.push(pos);

        if (width_counter == width_offset) {
            width_counter = 0;
            height_counter += 1;
        }

        if (counter%100 == 0) {
            var percentage = Math.round((counter/area)*100, 2);
            console.log("Percentage: "+percentage+"%" + "  "+counter);
        }

        width_counter += 1;
    }
    console.log(positions_clone.length);
    console.log(area_grid.length);

    areas[area_counter] = {'area': area_grid, 'positions': positions_clone};
    parent.find('.area').text(area_counter);
    area_counter += 1;
}             

任何修复它的线索将不胜感激。我已经展示了在视频中注释掉代码的某些部分后它的行为方式。

Answer 1

改变

var index = positions.findIndex(function(item) {

到

var index = positions_clone.findIndex(function(item) {

因为每次拼接后，原始位置的索引不会改变，但您仍在使用这些索引来拼接克隆。