(0905)Animation SR code review

Animation SR

• canvas 구현 순서

  1. video를 캡쳐해오는 offscreen canvas를 만든다
  2. offscreen canvas에서 sr video를 잘라서 div tag 안에 canvas1에 drawImage 한다
  3. offscreen canvas에서 origin video를 잘라서 div tag 안에 canvas2에 반만 보이도록 drawImage 한다
  4. canvas2 위에 div tag로 bar를 그린다
  5. bar 위치(canvas2 시작점으로부터 x)를 고려하여 canvas2를 보여주는 비율을 정한다
  6. bar를 움직일 수 있는지? (react-move 찾아보기) 가능!
  7. canvas가 div tag 움직임에 따라 보여지는 비율 조정 가능한지?
  8. -

• cavnas 관련

  • canvas가 panel size를 넘어가버림..
  • 캔버스 refresh가 비디오가 중단되어있을때도 돌아감 -> cpu를 많이 먹음
  • bar는 canvas 안에 들어있는 게 아니고 overlay로 올라가 있어야 되고 bar를 움직이면 canvas 두개가 겹쳐있는 거에 mask size만 css로 바꿔주는걸로 하면 정지된 상태에서도 계속 렌더링 할 필요가 없음
  • framerate는 requestanimframe 이거 한번 알아보고 알려주셈
  • sync 좌우가 따로 로딩이 되서 영상이 완벽하게 안맞음
  • video frame 따오는것도 한번만 따와야 됨
  • offscreen canvas : https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
  • double buffering (https://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering

// canvas element in DO
var canvas1 = document.getElementById('canvas1')
var context1 = canvas1.getContext('2d')

// buffer canvas
var canvas2 = document.createElement('canvas')
canvas2.width = 150
canvas2.height = 150
var context2 = canvas2.getContext('2d')

// create something on the canvas
context2.beginPath()
context2.moveTo(10, 10)
context2.lineTo(10, 30)
context2.stroke()

//render the buffered canvas onto the original canvas element
context1.drawImage(canvas2, 0, 0)

• video 관련

  • 전체화면 하는 기능
  • video playback 기능…
  • loop 기능
  • start / pause는 한 버튼이어야 함
  • video랑 제목 사이에 간격이 너무 큼… 이상함…

• css

  • animation list에 scroll이 안되있었음 : overflow: scroll
  • duration은 냅두고 480->1080 이거 지우기
  • 버튼과 그 레이아웃 사이에 간격은 일단 기본 10px
  • animlist height는 auto로
  • search 창에 hint (find … 등)
  • search창이랑 그 우측 버튼은 다른 기능이므로 떨어뜨림
  • 우측 버튼은 맨 오른쪽에 붙이고 search창이 나머지를 먹는 식으로