캔버스 요소를 식별하고 행렬에 요소를 구분합니다.

Question

캔버스 이미지의 픽셀 행렬을 이진수 행렬 (0 = 검정, 1 = 다른 색)으로 변환했습니다. 그 행렬은 다음과 같습니다 :

var matrix = [ 
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
    [0, 1, 0, 1, 1, 1, 1, 0, 0, 0], 
    [1, 1, 0, 1, 0, 0, 0, 1, 0, 0], 
    [1, 0, 0, 1, 0, 0, 0, 1, 0, 0], 
    [0, 0, 1, 1, 0, 0, 0, 1, 0, 0], 
    [0, 0, 0, 1, 0, 0, 0, 1, 1, 0], 
    [0, 1, 0, 1, 0, 0, 0, 1, 1, 1], 
    [0, 1, 0, 1, 1, 0, 0, 1, 1, 0], 
    [0, 1, 1, 1, 1, 1, 1, 1, 0, 0], 
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
]; 

1을 보면 이미지의 요소입니다. 어떻게 그 행렬 요소를 분리 할 수 ​​있습니까? 나는 각 위치에서 확인하고 난 1을 찾을 때마다, 나는 주위에 다른 일이있는 경우 (위, 아래, 오른쪽 또는 대각선 왼쪽) 을 다른 배열

for(var y = 0; y < contFilas; y++) { 

     for(var x = 0; x < contColumnas; x++) { 

      if (matrix[y][x]== 1) { 

       //check if there are more 1 around 
      } 

     } 
} 

내가 기대하는 결과 이러한 저장

ElementArray1 = [...] // elements of a region with positions 
ElementArray2 = [...] 
ElementArray3 = [...] 
//as many arrays as there are elements 

For example, the ElementArray1 contains: 

[(0,4),(0,5),(1,3),(1,4),(1,5),(1,6),(2,5),(2,6)] //first figure of 1s 

Answer 1

처음에는 배열을 사용하여 실제 자바 스크립트 행렬을 작성합니다. 루프에서 경계를 세고 범위를 초과하지 않도록주의하십시오. 빠른 예를 조각 :

편집 : 당신이 포스트를 편집으로 설정 픽셀의 추가 수집

편집 : 연결된 픽셀

지역을 찾아 변경 편집 : 추가 된 지역 unioning

var matrix = [ 
 
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
 
    [0, 1, 0, 1, 1, 1, 1, 0, 0, 0], 
 
    [1, 1, 0, 1, 0, 0, 0, 1, 0, 0], 
 
    [1, 0, 0, 1, 0, 0, 0, 1, 0, 0], 
 
    [0, 0, 1, 1, 0, 0, 0, 1, 0, 0], 
 
    [0, 0, 0, 1, 0, 0, 0, 1, 1, 0], 
 
    [0, 1, 0, 1, 0, 0, 0, 1, 1, 1], 
 
    [0, 1, 0, 1, 1, 0, 0, 1, 1, 0], 
 
    [0, 1, 1, 1, 1, 1, 1, 1, 0, 0], 
 
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
 
]; 
 

 
var contFilas = matrix.length; 
 
var contColumnas = matrix[0].length; 
 
var regions = []; 
 
var regionCollection = []; 
 

 
for (var y = 0; y < contFilas; y++) { 
 
    var regionline = []; 
 
    regions.push(regionline); 
 

 
    for (var x = 0; x < contColumnas; x++) { 
 
     var pixelRegion = 0; 
 
     var pixelRegions = []; 
 
     regionline[x] = 0; 
 

 

 
     if (matrix[y][x] === 1) { 
 
      // check previous row 
 
      if (y) { 
 
       if (matrix[y - 1][x] && pixelRegions.indexOf(regions[y - 1][x]) < 0) { 
 
        pixelRegions.push(regions[y - 1][x]); 
 
       } 
 
       if (x && matrix[y - 1][x - 1] && pixelRegions.indexOf(regions[y - 1][x - 1]) < 0) { 
 
        pixelRegions.push(regions[y - 1][x - 1]); 
 
       } 
 
       if (x + 1 < contColumnas && matrix[y - 1][x + 1] && pixelRegions.indexOf(regions[y - 1][x + 1]) < 0) { 
 
        pixelRegions.push(regions[y - 1][x + 1]); 
 
       } 
 
      } 
 

 
      // check current row 
 
      if (x && matrix[y][x - 1] && pixelRegions.indexOf(regions[y][x - 1]) < 0) { 
 
       pixelRegions.push(regions[y][x - 1]); 
 
      } 
 

 

 
      if (!pixelRegions.length) { 
 
       // if not connected, start a new region 
 
       regionCollection.push([]); 
 
       pixelRegion = regionCollection.length; 
 
      } else { 
 
       // update to lowest region index 
 

 
       // sort and ensure unique 
 
       pixelRegions = pixelRegions.sort().filter(function (value, index, self) { 
 
        return self.indexOf(value) === index; 
 
       }); 
 

 
       // union regions if there is a new connection 
 
       for (var idx = pixelRegions.length - 1; idx > 0; idx--) { 
 
        regions.forEach(function (regionline, ry) { 
 
         regionline.forEach(function (region, rx) { 
 
          if (region === pixelRegions[idx]) { 
 
           regions[ry][rx] = pixelRegions[idx - 1]; 
 
          } 
 
         }) 
 
        }) 
 
        regionCollection[pixelRegions[idx - 1] - 1] = regionCollection[pixelRegions[idx - 1] - 1].concat(
 
         regionCollection[pixelRegions[idx] - 1] 
 
        ) 
 
        regionCollection[pixelRegions[idx] - 1] = []; 
 
       } 
 

 
       pixelRegion = pixelRegions[0]; 
 
      } 
 

 
      // remember region 
 
      regionline[x] = pixelRegion; 
 
      regionCollection[pixelRegion - 1].push([x, y]); 
 
     } 
 
    } 
 
} 
 

 
// filter out empty regions 
 
regionCollection = regionCollection.filter(function (el) { 
 
    return el && el.length > 0; 
 
}); 
 

 
// output 
 
var canvas = document.querySelector("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var sz = 20; 
 
canvas.width = sz * contColumnas; 
 
canvas.height = sz * contColumnas; 
 
ctx.fillStyle = "silver"; 
 
ctx.fillRect(0, 0, canvas.width, canvas.height); 
 
regionCollection.forEach(function (regionCoords, region) { 
 
    regionCoords.forEach(function (coord) { 
 
     ctx.fillStyle = "black"; 
 
     ctx.fillRect(coord[0] * sz + 1, coord[1] * sz + 1, sz - 2, sz - 2); 
 

 
     ctx.fillStyle = "white"; 
 
     ctx.fillText(region + 1, coord[0] * sz + 8, coord[1] * sz + 13); 
 
    }) 
 
}); 
 
document.querySelector("#result").innerHTML = JSON.stringify(regionCollection)

<canvas></canvas> 
 
<div id="result"></div>