Question

我有2个矩阵，它是2个图像中几个像素阵列的结果。

我需要检测矩阵2的canvas元素何时位于元素1的边缘或矩阵1的边缘（矩阵1的矩形），此时它必须通知用户“检测到匹配！”

我创建矩阵1和2的代码：

var matrix = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
    [0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];

var matrix2 = [
    [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, 1, 0, 0, 1, 0, 0],
    [0, 0, 0, 1, 0, 0, 1, 1, 1, 0],
    [0, 0, 0, 1, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 1, 1, 0, 0, 1, 1, 0],
    [0, 0, 0, 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 canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var sz = 20;
var regions = [];
var regionCollection = [];

canvas.width = sz * contColumnas;
canvas.height = sz * contColumnas;
ctx.fillStyle = "silver";
ctx.fillRect(0, 0, canvas.width, canvas.height);

for (var y = 0; y < contFilas; y++) {
    var regionline = [];
    regions.push(regionline);

    for (var x = 0; x < contColumnas; x++) {
        var pixelRegion = 0;
        regionline[x] = 0;
       


        if (matrix[y][x] === 1) {
            // check previous row
            if (y) {
                if (matrix[y - 1][x]) {
                    pixelRegion = regions[y - 1][x];
                } else if (x && matrix[y - 1][x - 1]) {
                    pixelRegion = regions[y - 1][x - 1];
                } else if (x + 1 < contColumnas && matrix[y - 1][x + 1]) {
                    pixelRegion = regions[y - 1][x + 1];
                }
            }

            // check current row
            if (x && matrix[y][x - 1]) {
                pixelRegion = regions[y][x - 1];
            }

            // if not connected, start a new region
            if (!pixelRegion) {
                regionCollection.push([]);
                pixelRegion = regionCollection.length;
            }
            // remember region
            regionline[x] = pixelRegion;
            regionCollection[pixelRegion - 1].push([x, y]);

            // paint it
            ctx.fillStyle = "black";
            ctx.fillRect(x * sz + 1, y * sz + 1, sz - 2, sz - 2);
        }


        ctx.fillStyle = "white";
        ctx.fillText(pixelRegion, x * sz + 8, y * sz + 13);

    }
}
document.querySelector("#result").innerHTML = JSON.stringify(regionCollection);

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>getUserMedia</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
	<canvas></canvas>
	<div id="result"></div>
	<div id="result2"></div>
</body>
</html>

我该怎么做？检测内部是否存在元素或触摸矩形1（矩阵）？

如何检查canvas元素（像素矩阵）包含

0 个答案: