2017-08-15 25 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) { 

因爲每個拼接後,原來的位置的指標並沒有改變,但你仍然在使用這些指標拼接克隆。