@@ -2462,7 +2462,7 @@ var JSONResponse = {
24622462 return item . bbox || item . box || item
24632463 } ,
24642464 getScore : function ( item ) {
2465- return item . score || item . probability || item . possibility || item . feasibility || item . eventuality || item . odds || item . prob || item . possib || item . feasib || item . eventual ;
2465+ return item . score || item . confidence || item . probability || item . possibility || item . feasibility || item . eventuality || item . odds || item . conf || item . prob || item . possib || item . feasib || item . eventual ;
24662466 } ,
24672467
24682468 drawDetections : function ( canvas , detection , options , img , ctx ) {
@@ -2485,11 +2485,11 @@ var JSONResponse = {
24852485 ctx . textBaseline = 'top' ;
24862486
24872487 const placedLabels = [ ] ;
2488- const rotateBoxes = options . rotateBoxes || false ;
2489- const rotateText = options . rotateText || false ;
2490- const showLabelBackground = options . labelBackground || false ;
2491- const hoverBoxId = options . hoverBoxId || null ;
2492- const visiblePaths = options . visiblePaths || null ;
2488+ const rotateBoxes = options . rotateBoxes ;
2489+ const rotateText = options . rotateText ;
2490+ const showLabelBackground = options . labelBackground ;
2491+ const hoverBoxId = options . hoverBoxId ;
2492+ const visiblePaths = options . visiblePaths ;
24932493 const stage = options . stage ;
24942494 const isDiff = stage === 'diff' ;
24952495 const markable = options . markable || stage !== 'before' ;
@@ -2504,7 +2504,7 @@ var JSONResponse = {
25042504 // Draw bboxes
25052505 var bboxes = JSONResponse . getBboxes ( detection ) || [ ]
25062506 bboxes ?. forEach ( ( item , index ) => {
2507- const isHovered = item . id === hoverBoxId ;
2507+ const isHovered = index === hoverBoxId ;
25082508 const visible = ! visiblePaths || visiblePaths . length <= 0 || visiblePaths . includes ( item . path || item . id ) ;
25092509 if ( ! visible ) {
25102510 return ;
@@ -2527,9 +2527,9 @@ var JSONResponse = {
25272527 }
25282528
25292529 const [ r , g , b , a ] = color || [ 0 , 255 , 0 , 255 ] ;
2530- const rgba = `rgba(${ r } ${ g } ${ b } ${ Math . min ( 0.5 , a / 255 ) } ;
2530+ const rgba = `rgba(${ r } ${ g } ${ b } ${ hoverBoxId != null || ! isHovered ? 0.3 : Math . min ( 0.5 , a < 1 ? a : a / 255 ) } ;
25312531
2532- const reversedRgba = `rgba(${ 255 - r } ${ 255 - g } ${ 255 - b } ; // , 0.2`; // ${1 - a/255 })`;
2532+ const reversedRgba = `rgba(${ 255 - r } ${ 255 - g } ${ 255 - b } , $ { isHovered || hoverBoxId == null ? 1 : 0.3 } ) `;
25332533 // const luma = 0.299 * r + 0.587 * g + 0.114 * b;
25342534 const backgroundFill = rgba; // 还是有些看不清 luma > 186 ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.5)';
25352535
@@ -2548,6 +2548,10 @@ var JSONResponse = {
25482548 ctx.restore();
25492549 }
25502550
2551+ if (hoverBoxId != null && ! isHovered) {
2552+ return
2553+ }
2554+
25512555 // Label
25522556 const label = (isDiff ? (item['@before'] ? '- ' : '+ ') : '') + ` $ { item . ocr || item . label || '' } - $ { item . id || '' } ${( ( JSONResponse . getScore ( item ) || 0 ) * 100 ) . toFixed ( 0 ) } % $ { angle == 0 ? '' : ' ' + Math . round ( angle ) + '°' } `;
25532557 // ctx.font = 'bold 36px';
@@ -2618,7 +2622,11 @@ var JSONResponse = {
26182622 // Draw lines
26192623 var lines = JSONResponse . getLines ( detection ) ;
26202624 if ( lines instanceof Array ) {
2621- lines ?. forEach ( ( item ) => {
2625+ lines ?. forEach ( ( item , index ) => {
2626+ if ( isRoot && hoverBoxId != null && index != hoverBoxId ) {
2627+ return ;
2628+ }
2629+
26222630 var [ x , y , w , h , d ] = JSONResponse . getXYWHD ( item ) ;
26232631 const isRate = Math . abs ( x ) < 1 && Math . abs ( y ) < 1 && Math . abs ( w ) < 1 && Math . abs ( h ) < 1 ;
26242632 x = isRate ? x * width : x * xRate ;
@@ -2651,7 +2659,11 @@ var JSONResponse = {
26512659 // Draw points
26522660 var points = JSONResponse . getPoints ( detection ) ;
26532661 if ( points instanceof Array ) {
2654- points ?. forEach ( ( item ) => {
2662+ points ?. forEach ( ( item , index ) => {
2663+ if ( isRoot && hoverBoxId != null && index != hoverBoxId ) {
2664+ return ;
2665+ }
2666+
26552667 var [ x , y , w , h , d ] = JSONResponse . getXYWHD ( item ) ;
26562668 const isRate = Math . abs ( x ) < 1 && Math . abs ( y ) < 1 && Math . abs ( w ) < 1 && Math . abs ( h ) < 1 ;
26572669 x = isRate ? x * width : x * xRate ;
@@ -2681,10 +2693,19 @@ var JSONResponse = {
26812693 // Draw polygons
26822694 var polygons = JSONResponse . getPolygons ( detection ) ;
26832695 if ( polygons instanceof Array ) {
2684- polygons . forEach ( ( item , i ) => {
2696+ polygons . forEach ( ( item , index ) => {
2697+ if ( isRoot && hoverBoxId != null && index != hoverBoxId ) {
2698+ return ;
2699+ }
2700+
26852701 var points = JSONResponse . getPoints ( item ) || item ;
26862702 if ( points instanceof Array ) {
26872703 const color = item . color || detection . color || detection . bbox ?. color ;
2704+ if ( color != null && color . length >= 3 ) {
2705+ var alpha = color [ 3 ] || 0.5 ;
2706+ color [ 3 ] = alpha <= 1 ? alpha : alpha / 255 ;
2707+ }
2708+
26882709 const rgba = color == null || color . length < 3 ? null : `rgba(${ color . join ( ',' ) } ;
26892710 if ( rgba != null ) {
26902711 ctx . fillStyle = rgba ;
0 commit comments