javascript - 识别 Canvas 元素，分离矩阵中的元素

Question

我已将 Canvas 图像的像素矩阵转换为二进制矩阵(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 (上、下、左、右或对 Angular 线)并将它们保存在不同的数组中

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>