[Tensorflow-models] HTML - clearRect() 함수

문제 인식

• 정지 버튼을 누르면 캔버스에 그려졌던 손, 얼굴, 포즈의 keypoints와 path가 남아있는 현상
• 사수께서 clearRect() 함수가 정상적으로 적용되지 않았다고 알려주심

 

---

 

cleatRect() 함수 사용법

• 출처 : W3 school

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 200, 100);
ctx.clearRect(40, 40, 50, 50);

• 결과물 : 빨간색 context 내부에 설정한 크기의 사각형의 색이 지워졌음

• 그러나 이 코드가 개별 detector 함수에 들어가면 안 됨 (∵ 향후 다른 detector 함수와 함께 실행하였을 때 오류 가능성)
• 따라서 detector 관련 코드를 모두 관리하는 detector-manager 코드에서 clearRect() 함수를 적용해야 함

 

---

 

해결법

• draw 하여 캔버스에 비디오를 그리기 전에 clearRect 하여 이전의 캔버스를 지워야함
• 지속적으로 렌더링되어 캔버스에 이미지가 그려지기 때문

if (result) {
  if (dt.drawBox) {
      dt.context.clearRect(0,0,Detector.DIMENSIONS[0],Detector.DIMENSIONS[1]);
      dt.detector.draw(dt.canvas);
      this._renderer.updateBitmapSkin(dt.skinId, dt.canvas, 1);
  } 
} else {
  if (dt.drawBox && hasResult) {
      dt.context.clearRect(0,0,Detector.DIMENSIONS[0],Detector.DIMENSIONS[1]);
      this._renderer.updateBitmapSkin(dt.skinId,dt.canvas,1);
  }
}