45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import IOffset from "../Interfaces/IOffset"
|
|
import IPredictedObject from "../Interfaces/IPredictedObject"
|
|
import IUiRenderer from "../Interfaces/IUiRenderer"
|
|
|
|
class UiRenderer implements IUiRenderer {
|
|
render (props: { imageData: ImageData, predictedObjects: IPredictedObject[], offsets: IOffset[] }) {
|
|
|
|
const body: HTMLBodyElement = document.querySelector('body')!
|
|
|
|
let canvasElement: HTMLCanvasElement = document.querySelector('#videoOutput') as HTMLCanvasElement
|
|
if (!canvasElement) {
|
|
canvasElement = document.createElement('canvas')
|
|
canvasElement.id = 'videoOutput'
|
|
canvasElement.width = props.imageData.width
|
|
canvasElement.height = props.imageData.height
|
|
body.append(canvasElement)
|
|
}
|
|
|
|
const canvasContext = canvasElement.getContext('2d')!
|
|
canvasContext.clearRect(0, 0, canvasElement.width, canvasElement.height)
|
|
canvasContext.putImageData(props.imageData, 0, 0)
|
|
|
|
props.predictedObjects.forEach(obj => {
|
|
canvasContext.strokeStyle = 'rgb(0, 255, 0)'
|
|
canvasContext.strokeRect(obj.xOrigin, obj.yOrigin, obj.width, obj.height)
|
|
})
|
|
|
|
const startPoint = {
|
|
x: props.imageData.width / 2,
|
|
y: props.imageData.height / 2
|
|
}
|
|
|
|
props.offsets.forEach(offset => {
|
|
canvasContext.strokeStyle = 'rgb(255, 0, 0)'
|
|
canvasContext.beginPath()
|
|
canvasContext.moveTo(startPoint.x, startPoint.y)
|
|
canvasContext.lineTo(startPoint.x - offset.x, startPoint.y - offset.y)
|
|
canvasContext.closePath()
|
|
canvasContext.stroke()
|
|
})
|
|
}
|
|
}
|
|
|
|
export default UiRenderer
|