キャンバス要素を特定し、行列内に別々の要素を指定します

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を見つけるたび、私は他の周り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

最初は、配列を使用して実際のjavascript行列を作成します。あなたのループでは、サラウンドを数え、あなたの範囲を超えないように注意してください。簡単な例を抜粋：

EDIT：あなたはポストに編集したとして設定された画素を追加しましコレクション

EDIT：連結画素

の領域を見つけるために、変更EDIT：添加領域合併する

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>