识别帆布元素，矩阵中的单独元素

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],
];

如果您看它，则1s是图像的元素。我如何分开该矩阵的元素？，我必须检查每个位置，并且每当找到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矩阵。在您的循环中，计算周围的人，请注意不要超越界限。快速示例摘要：

编辑：编辑帖子时添加了像素集的集合

编辑：更改为查找连接的像素的区域

编辑：添加了区域联合

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>