import { IPoint } from '../interfaces/IPoint' ; import { ISize } from '../interfaces/ISize' ; import { UnitUtil } from './UnitUtil' ; import { IRect } from '../interfaces/IRect' ; import { IDetectedObject } from '../interfaces/IDetectedObject' ; export class DrawUtil { public static clearCanvas ( canvas ) { let ctx = canvas . getContext ( '2d' ) ; ctx . clearRect ( 0 , 0 , canvas . width , canvas . height ) ; } public static drawLine ( canvas , startPoint , endPoint , color = "#111111" , thickness = 25 ) { let ctx = canvas . getContext ( '2d' ) ; ctx . save ( ) ; ctx . strokeStyle = color ; ctx . lineWidth = thickness ; ctx . lineCap = 'round' ; ctx . beginPath ( ) ; ctx . moveTo ( startPoint . x , startPoint . y ) ; ctx . lineTo ( endPoint . x + 1 , endPoint . y + 1 ) ; ctx . stroke ( ) ; ctx . restore ( ) ; } public static drawRect ( canvas , rect , color = "#fff" , thickness = 1 ) { let ctx = canvas . getContext ( '2d' ) ; ctx . save ( ) ; ctx . strokeStyle = color ; ctx . lineWidth = thickness ; ctx . beginPath ( ) ; ctx . rect ( rect . x , rect . y , rect . width , rect . height ) ; ctx . stroke ( ) ; ctx . restore ( ) ; } public static shadeEverythingButRect ( canvas , rect , color = "rgba(0, 0, 0, 0.7)" ) { let ctx = canvas . getContext ( '2d' ) ; ctx . save ( ) ; ctx . fillStyle = color ; ctx . fillRect ( 0 , 0 , canvas . width , canvas . height ) ; ctx . globalCompositeOperation = "destination-out" ; ctx . fillRect ( rect . x , rect . y , rect . width , rect . height ) ; ctx . restore ( ) ; } public static drawFullCircle ( canvas , anchorPoint , radius , color = "#ffffff" ) { const ctx = canvas . getContext ( '2d' ) ; ctx . save ( ) ; const startAngleRad = UnitUtil . deg2rad ( 0 ) ; const endAngleRad = UnitUtil . deg2rad ( 360 ) ; ctx . fillStyle = color ; ctx . beginPath ( ) ; ctx . arc ( anchorPoint . x , anchorPoint . y , radius , startAngleRad , endAngleRad , false ) ; ctx . fill ( ) ; ctx . restore ( ) ; } public static drawCircle ( canvas , anchorPoint , radius , startAngleDeg , endAngleDeg , thickness = 20 , color = "#ffffff" ) { let ctx = canvas . getContext ( '2d' ) ; let startAngleRad = UnitUtil . deg2rad ( startAngleDeg ) ; let endAngleRad = UnitUtil . deg2rad ( endAngleDeg ) ; ctx . save ( ) ; ctx . strokeStyle = color ; ctx . lineWidth = thickness ; ctx . beginPath ( ) ; ctx . arc ( anchorPoint . x , anchorPoint . y , radius , startAngleRad , endAngleRad , false ) ; ctx . stroke ( ) ; ctx . restore ( ) ; } public static drawCircleWithGradient ( canvas , anchorPoint , radius , startAngleDeg , endAngleDeg , thickness = 20 , colorStart = "#ff6138" , colorEnd = "#ffB700" ) { let ctx = canvas . getContext ( '2d' ) ; let startAngleRad = UnitUtil . deg2rad ( startAngleDeg ) ; let endAngleRad = UnitUtil . deg2rad ( endAngleDeg ) ; let smallCord = Math . min ( anchorPoint . x , anchorPoint . y ) ; let gradient = ctx . createLinearGradient ( 0 , anchorPoint . y - smallCord , 2 * anchorPoint . x , anchorPoint . y + smallCord ) ; gradient . addColorStop ( 0 , colorStart ) ; gradient . addColorStop ( 1 , colorEnd ) ; ctx . save ( ) ; ctx . strokeStyle = gradient ; ctx . lineWidth = thickness ; ctx . beginPath ( ) ; ctx . arc ( anchorPoint . x , anchorPoint . y , radius , startAngleRad , endAngleRad , false ) ; ctx . stroke ( ) ; ctx . restore ( ) ; } public static drawText ( canvas , text , textSize , anchorPoint , color = "#ffffff" , bold = false ) { let ctx = canvas . getContext ( '2d' ) ; ctx . save ( ) ; ctx . fillStyle = color ; ctx . textAlign = "center" ; ctx . textBaseline = "middle" ; ctx . font = ( bold ? "bold " : "" ) + textSize + "px Titillium Web" ; ctx . fillText ( text , anchorPoint . x , anchorPoint . y ) ; ctx . restore ( ) ; } public static drawPredictionRect ( canvas , prediction , thickness = 1 , color = "#fff" , textSize = 10 ) { DrawUtil . drawRect ( canvas , prediction . rect , color , thickness ) ; let ctx = canvas . getContext ( '2d' ) ; ctx . save ( ) ; ctx . font = "bold " + textSize + "px Titillium Web" ; let txt = prediction . class + " " + prediction . probability . toFixed ( 2 ) ; let padding = 2 ; let width = ctx . measureText ( txt ) . width ; ctx . fillStyle = color ; ctx . textAlign = "start" ; ctx . textBaseline = "top" ; ctx . fillRect ( prediction . rect . x , prediction . rect . y , width + padding * 2 , textSize + padding * 2 ) ; ctx . fillStyle = "#fff" ; ctx . fillText ( txt , prediction . rect . x + padding , prediction . rect . y ) ; ctx . restore ( ) ; } public static getImageDataAndScale ( canvas , outputSize ) { let scaled = document . createElement ( "canvas" ) ; let scaledCtx = scaled . getContext ( '2d' ) ; scaled . width = outputSize . width ; scaled . height = outputSize . height ; scaledCtx . drawImage ( canvas , 0 , 0 , outputSize . width , outputSize . height ) ; return scaledCtx . getImageData ( 0 , 0 , outputSize . width , outputSize . height ) ; } public static getRandomRGBColor ( ) { return "rgb(" + Math . round ( Math . random ( ) * 255 ) + "," + Math . round ( Math . random ( ) * 255 ) + "," + Math . round ( Math . random ( ) * 255 ) + ")" ; } }