2017-08-15 40 views
2

要充分认识本说明这个阵列; `当页面加载时获取图像的区域(宽度*高度)并为该区域中的所有位置创建所有x,y位置。错误在JavaScript中

这工作正常。

当我有另一个面积从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; 
}    

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

+0

凡'counter'声明?确保你开始你的程序用'“使用严格的”;' –

+0

它宣布在for循环 –

+0

不在的问题。 'for(counter = 0; counter

回答

1

变化

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

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

因为每个拼接后,原来的位置的指标并没有改变,但你仍然在使用这些指标拼接克隆。