* [task#127426] add region attributes to mark the region.

lib/zin/wg/think3c/js/v1.js

@@ -1,3 +1,4 @@
+const colors = ['#CFE7FE', '#DCEFF9', '#E0EBFC', '#DBE9FA', '#D4EEE9', '#E4DFF7', '#E7EBF6'];
 $(document).ready(function()
 {
     const canvas = $('#canvas')[0];
@@ -100,7 +101,7 @@ function getCanvasSize(width = 0, height = 0)
  */
 function getRegionInfo(pixels, visited, x, y, width, height)
 {
-    const region = {area: 0, rows: []};
+    const region = {area: 0, rows: [],  minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity};
 
     /* 创建栈数据结构。*/
     /* Create a stack data structure.*/
@@ -124,6 +125,11 @@ function getRegionInfo(pixels, visited, x, y, width, height)
             currentRow.right = Math.max(currentRow.right, currentX);
             if(currentRow.top === undefined) currentRow.top = currentY;
 
+            region.minX = Math.min(region.minX, currentX);
+            region.minY = Math.min(region.minY, currentY);
+            region.maxX = Math.max(region.maxX, currentX);
+            region.maxY = Math.max(region.maxY, currentY);
+
             if (currentX > 0) stack.push([currentX - 1, currentY]);
             if (currentX < width - 1) stack.push([currentX + 1, currentY]);
             if (currentY > 0) stack.push([currentX, currentY - 1]);
@@ -223,7 +229,6 @@ function colorRegions(binaryImageData)
         {
             const canvas = document.createElement('canvas');
             const ctx    = canvas.getContext('2d');
-            const colors = ['#CFE7FE', '#DCEFF9', '#E0EBFC', '#DBE9FA', '#D4EEE9', '#E4DFF7', '#E7EBF6'];
 
             canvas.width  = img.width;
             canvas.height = img.height;
@@ -282,4 +287,4 @@ function displayColoredImage(coloredImageData)
 
     img.src    = coloredImageData;
     img.onload = function(){ctx.drawImage(img, 0, 0);};
-}
+}