CVAuto：线段用 [x1, y1, x2, y2] 格式画，对错 √ x 放到标签左侧避免被遮挡

Author: TommyLemon

APIJSON-Java-Server/APIJSONBoot-MultiDataSource/src/main/resources/static/cv/apijson/JSONResponse.js

@@ -2284,11 +2284,29 @@ var JSONResponse = {
 
     var x = bbox.x || bbox.x0 || bbox.x1 || bbox.startX || bbox.xStart || bbox.leftTopX || bbox.topLeftX || bbox.start_x || bbox.x_start || bbox.left_top_x || bbox.top_left_x || 0;
     var y = bbox.y || bbox.y0 || bbox.y1 || bbox.startY || bbox.yStart || bbox.leftTopY || bbox.topLeftY || bbox.start_y || bbox.y_start || bbox.left_top_y || bbox.top_left_y || 0;
-    var w = bbox.w || bbox.width || ((bbox.x2 || bbox.x1 || bbox.rbx || bbox.brx || bbox.endX || bbox.xEnd || bbox.rightBottomX || bbox.bottomRightX || bbox.end_x || bbox.x_end || bbox.right_bottom_x || bbox.bottom_right_x || 0) - x);
-    var h = bbox.h || bbox.height || ((bbox.y2 || bbox.y1 || bbox.rby || bbox.bry || bbox.endY || bbox.yEnd || bbox.rightBottomY || bbox.bottomRightY || bbox.end_y || bbox.y_end || bbox.right_bottom_y || bbox.bottom_right_y || 0) - y);
+    var w = bbox.width || bbox.w || ((bbox.x2 || bbox.x1 || bbox.rbx || bbox.brx || bbox.endX || bbox.xEnd || bbox.rightBottomX || bbox.bottomRightX || bbox.end_x || bbox.x_end || bbox.right_bottom_x || bbox.bottom_right_x || 0) - x);
+    var h = bbox.height || bbox.h || ((bbox.y2 || bbox.y1 || bbox.rby || bbox.bry || bbox.endY || bbox.yEnd || bbox.rightBottomY || bbox.bottomRightY || bbox.end_y || bbox.y_end || bbox.right_bottom_y || bbox.bottom_right_y || 0) - y);
     var d = bbox.degree || bbox.angle || bbox.rotate || bbox.perspective || bbox.d || bbox.r || bbox.p || bbox.a;
     return [+ (x || 0), + (y || 0), + (w || 0), + (h || 0), + (d || 0)];
   },
+  getXYXYD: function (bbox) {
+    if (bbox == null) {
+      return null;
+    }
+    if (JSONResponse.isString(bbox)) {
+      bbox = StringUtil.split(bbox, ',', true);
+    }
+    if (bbox instanceof Array) {
+      return [+ (bbox[0] || 0), + (bbox[1] || 0), + (bbox[2] || 0), + (bbox[3] || 0), + (bbox[4] || 0)];
+    }
+
+    var x = bbox.x || bbox.x0 || bbox.x1 || bbox.startX || bbox.xStart || bbox.leftTopX || bbox.topLeftX || bbox.start_x || bbox.x_start || bbox.left_top_x || bbox.top_left_x || 0;
+    var y = bbox.y || bbox.y0 || bbox.y1 || bbox.startY || bbox.yStart || bbox.leftTopY || bbox.topLeftY || bbox.start_y || bbox.y_start || bbox.left_top_y || bbox.top_left_y || 0;
+    var x2 = bbox.x2 || bbox.x1 || bbox.rbx || bbox.brx || bbox.endX || bbox.xEnd || bbox.rightBottomX || bbox.bottomRightX || bbox.end_x || bbox.x_end || bbox.right_bottom_x || bbox.bottom_right_x || ((bbox.width || bbox.w || 0) + x);
+    var y2 = bbox.y2 || bbox.y1 || bbox.rby || bbox.bry || bbox.endY || bbox.yEnd || bbox.rightBottomY || bbox.bottomRightY || bbox.end_y || bbox.y_end || bbox.right_bottom_y || bbox.bottom_right_y || ((bbox.height || bbox.h || 0) + y);
+    var d = bbox.degree || bbox.angle || bbox.rotate || bbox.perspective || bbox.d || bbox.r || bbox.p || bbox.a;
+    return [+ (x || 0), + (y || 0), + (x2 || 0), + (y2 || 0), + (d || 0)];
+  },
   /**
    * 计算两个 bbox（[x, y, w, h, r]）的 IoU
    */
@@ -2528,7 +2546,7 @@ var JSONResponse = {
           }
 
           const [r, g, b, a] = color || [0, 255, 0, 255];
-          const rgba = `rgba(${r}, ${g}, ${b}, ${hoverBoxId != null || ! isHovered ? 0.3 : Math.min(0.5, a < 1 ? a : a / 255)})`;
+          const rgba = `rgba(${r}, ${g}, ${b}, ${hoverBoxId != null && ! isHovered ? 0.3 : Math.min(0.5, a < 1 ? a : a / 255)})`;
 
           const reversedRgba = `rgba(${255 - r}, ${255 - g}, ${255 - b}, ${isHovered || hoverBoxId == null ? 1 : 0.3})`;
           // const luma = 0.299 * r + 0.587 * g + 0.114 * b;
@@ -2553,8 +2571,16 @@ var JSONResponse = {
             return
           }
 
+          is_before = item['@before'];
+          mark = '';
+          if (markable && is_before != true) {
+            const isWrong = wrongs.indexOf(isDiff ? item['@index'] : index) >= 0; // item.correct === false;
+            // 绘制 √ 和 ×
+            mark = isWrong ? '× ' : '✓ ';
+          }
+
           // Label
-          const label = (isDiff ? (item['@before'] ? '- ' : '+ ') : '') + `${item.ocr || item.label || ''}-${item.id || ''} ${((JSONResponse.getScore(item) || 0)*100).toFixed(0)}%${angle == 0 ? '' : ' ' + Math.round(angle) + '°'}`;
+          const label = mark + (isDiff ? (is_before ? '- ' : '+ ') : '') + `${item.ocr || item.label || ''}-${item.id || ''} ${((JSONResponse.getScore(item) || 0)*100).toFixed(0)}%${angle == 0 ? '' : ' ' + Math.round(angle) + '°'}`;
           // ctx.font = 'bold 36px';
           // const size = ctx.measureText(label);
           // const textHeight = size.height || height*0.1; // Math.max(height*0.1, size.height);
@@ -2606,17 +2632,6 @@ var JSONResponse = {
           ctx.fillText(label, labelX, labelY);
           ctx.restore();
 
-          if (markable && item['@before'] != true) {
-            const isWrong = wrongs.indexOf(isDiff ? item['@index'] : index) >= 0; // item.correct === false;
-            // 绘制 √ 和 ×
-            ctx.font = `bold ${fontSize}px sans-serif`;
-            // ctx.fillStyle = isWrong ? 'red' : 'green';
-            ctx.fillStyle = isWrong ? 'red' : 'green';
-            const checkX = labelX + textWidth + 4;
-            const checkY = labelY;
-            ctx.fillText(isWrong ? '×' : '√', checkX, checkY);
-          }
-
           JSONResponse.drawDetections(canvas, item, options, img, ctx);
         });
     }
@@ -2629,12 +2644,12 @@ var JSONResponse = {
           return;
         }
 
-        var [x, y, w, h, d] = JSONResponse.getXYWHD(item);
-        const isRate = Math.abs(x) < 1 && Math.abs(y) < 1 && Math.abs(w) < 1 && Math.abs(h) < 1;
+        var [x, y, x2, y2, d] = JSONResponse.getXYXYD(item);
+        const isRate = Math.abs(x) < 1 && Math.abs(y) < 1 && Math.abs(x2) < 1 && Math.abs(y2) < 1;
         x = isRate ? x*width : x*xRate;
         y = isRate ? y*height : y*yRate;
-        w = isRate ? w*width : w*xRate;
-        h = isRate ? h*height : h*yRate;
+        x2 = isRate ? x2*width : x2*xRate;
+        y2 = isRate ? y2*height : y2*yRate;
 
         const color = item.color || detection.color || detection.bbox?.color;
         const rgba = color == null || color.length <= 0 ? null : `rgba(${color.join(',')})`;
@@ -2645,7 +2660,7 @@ var JSONResponse = {
 
         ctx.beginPath();
         ctx.moveTo(x, y);
-        ctx.lineTo(x + w, y + h);
+        ctx.lineTo(x2, y2);
         ctx.stroke();
 
         if (isRoot) {