开发者问题收集

javascript 中的数组错误

2017-08-15
57

要完全理解这一点,请注意以下几点:`当页面加载时,它会获取图像的区域(宽度 * 高度),并为该区域内的所有位置创建所有 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;
}             

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

1个回答

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

更改为

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

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

Nelson Yeung
2017-08-15