diff --git a/demo/js/canvasImage.js b/demo/js/canvasImage.js index 8a4078c..46ff232 100644 --- a/demo/js/canvasImage.js +++ b/demo/js/canvasImage.js @@ -21,7 +21,7 @@ define( var cvsW = context.width; var img = new Image(); - img.src = "../test/add.gif"; + img.src = "../test/contour.png"; var width; var height; img.onload = function (){ diff --git a/src/graphics/image/findContours.js b/src/graphics/image/findContours.js index 386b0d6..cc9a818 100644 --- a/src/graphics/image/findContours.js +++ b/src/graphics/image/findContours.js @@ -22,7 +22,7 @@ define( * @param {boolean} isClockwise 是否顺时针 * @return {Array} 找到的轮廓点集 */ - function findContour(imageData, startPoint, isInContour, isClockwise) { + function findContour(imageData, startPoint, isInContour) { var data = imageData.data; var width = imageData.width; var height = imageData.height; @@ -37,66 +37,15 @@ define( var contour = [startPoint]; var finded; do { - startIndex = index + 8 + (isClockwise ? 3 : 7); + startIndex = index + 11; finded = false; for (var i = 0; i < 7; i++) { - index = (startIndex + (isClockwise ? - i : i )) % 8; - dx = x + DIRECTION[index][0]; - dy = y + DIRECTION[index][1]; - // 找到轮廓点 - if (!!data[dx + dy * width] === isInContour) { - x = dx; - y = dy; - finded = true; - contour.push({ - x: dx, - y: dy - }); - break; - } - } - - if (!finded) { - return null; - } - } - while (x !== startX || y !== startY); - - return contour; - } - - /** - * 逆时针查找轮廓边缘点 - * - * @param {Object} imageData 图像数据 - * @param {Object} startPoint 起始点 - * @param {boolean} isInContour 是否在轮廓内 - * - * @return {Array} 找到的轮廓点集 - */ - function findContourAntiClockWise(imageData, startPoint, isInContour) { - var data = imageData.data; - var width = imageData.width; - var height = imageData.height; - var index = 0; // 当前方向 - var startIndex; // 当前起始方向 - var startX = startPoint.x; - var startY = startPoint.y; - var x = startX; - var y = startY; - var dx; - var dy; - var contour = [startPoint]; - var finded; - do { - startIndex = index + 7 + 8; - finded = false; - for (var i = 0; i < 7; i++) { - index = (startIndex + i) % 8; + index = (startIndex - i) % 8; dx = x + DIRECTION[index][0]; dy = y + DIRECTION[index][1]; // 找到轮廓点 if (!!data[dx + dy * width] === isInContour) { + data[dx + dy * width] = isInContour ? 2 : 3; x = dx; y = dy; finded = true; @@ -133,14 +82,8 @@ define( var line; var prevLine; var isInContour = false; - var startPointArray = []; // 记录外轮廓起始节点 - var startInCurvePointArray = []; // 记录内轮廓起始节点 - var currentLineArray = []; // 记录当前点集合 - var prevLineEmpty = true; // 上一行是否空行 - var startPoint; - var endPoint; - var point; - + var contours = []; + var contour; // 查找外轮廓坐标 for (y = 0; y < height; y ++) { @@ -148,93 +91,36 @@ define( isInContour = false; currentLineArray = []; for (x = 0; x < width; x++) { - // 外轮廓起始点 - if (!isInContour && data[line + x]) { + // 查找外轮廓 + if (!isInContour && data[line + x] === 1) { isInContour = true; - currentLineArray.push({ - x: x, - y: y, - isInContour: true - }); + if (!data[line + x - 1]) { + contour = findContour(imageData, { + x: x, + y: y + }, true); + contours.push(contour); + } + } + // 查找内轮廓 else if (isInContour && !data[line + x]) { isInContour = false; - currentLineArray.push({ - x: x, - y: y, - isInContour: false - }); - } - } - - if (!currentLineArray.length) { - prevLineEmpty = true; - } - else { - - // 轮廓顶部 - if (prevLineEmpty) { - currentLineArray.forEach(function (p) { - if (p.isInContour) { - startPointArray.push(p); - } - }) - } - else { - prevLine = (y - 1) * width; - for (var i = 0, l = currentLineArray.length - 1; i < l; i++) { - // 在曲线内的线段，判断上一条线全为白点，则为新contour的起始点 - if (currentLineArray[i].isInContour) { - var isAllWhite = true; - for (var j = currentLineArray[i].x, je = currentLineArray[i + 1].x - 1; j < je; j++) { - if (data[prevLine + j]) { - isAllWhite = false; - break; - } - } - if (isAllWhite) { - startPointArray.push(currentLineArray[i]); - } - } - else if (!currentLineArray[i].isInContour) { - var isAllBlack = true; - for (var j = currentLineArray[i].x, je = currentLineArray[i + 1].x - 1; j < je; j++) { - if (!data[prevLine + j]) { - isAllBlack = false; - break; - } - } - if (isAllBlack) { - startInCurvePointArray.push(currentLineArray[i]); - } - } + if (data[line + x - 1] === 1) { + contour = findContour(imageData, { + x: x - 1, + y: y + }, true); + contours.push(contour.reverse()); } } - - prevLineEmpty = false; } } - var contours = []; - if (!startPointArray) { - return contours; - } - else { - startPointArray.forEach(function (p) { - var contour = findContour(imageData, p, true, true); - if (contour) { - contours.push(contour); - } - }); - startInCurvePointArray.forEach(function (p) { - var contour = findContour(imageData, p, false, false); - if (contour) { - contours.push(contour); - } - }); - } - - return contours; + // 这里需要过滤一些极小的轮廓 + return contours.filter(function (contour) { + return contour.length > 10; + }); } return findContours; diff --git a/test/add.bmp b/test/add.bmp new file mode 100644 index 0000000..0d154cd Binary files /dev/null and b/test/add.bmp differ diff --git a/test/circle.bmp b/test/circle.bmp new file mode 100644 index 0000000..17d4381 Binary files /dev/null and b/test/circle.bmp differ diff --git a/test/contour.png b/test/contour.png new file mode 100644 index 0000000..82f7000 Binary files /dev/null and b/test/contour.png differ