간단한 설명과
채우는 과정을 실시함에 있어 리사이즈(스케일)=fit 방법이나 그림이 짤려도 캔버스 영역이 전부 가득 차게 만들기=fill을 하는 방법을 말합니다.
해당 채우는 명령어는 drawImage()이고
캔버스 오브젝트를 만든 후 그 아래 getContext("2d")를 통해 다시 2d 처리 api 영역으로 진입 이후 drawImage()를 사용합니다.
아니 자바는 명칭 분류가 너무 이상하게 되어있어가지고 아직도 getContext("2d")를 뭐라고 불러야 하는지 명칭을 모르겠음. canvas는 오브젝트이고 그 아래서 공용 툴로 제공하는 함수는 메소드인것까지는 그나마 알겠는데.
어쨌든 돌아가서 drawImage()를 사용할때 입력 인수는 3개 또는 5개 또는 9개인데, 우리의 목적을 달성하기 위해서는 5개가 필요하다.
drawImage(이미지, 표현할 이미지의 캔버스에서의 왼쪽으로부터의 offset 위치,표현할 이미지의 캔버스에서의 위로부터의 offset 위치, 표현할 이미지의 밑면, 표현할 이미지의 세로길이 ) 이다.
drawImage(이미지, x offset, y offset, 이미지 width, 이미지 hight).
여기서 이미지는 자기가 객체를 만들어서 목표 파일이던 뭐던 creaturlobject이던 어떻게든 자기가 만들었다고 치고.
Fit의 경우엔
빨간색을 검은색에 넣어야 한다고 해 보자. 리사이즈를 해봤으면 알겠지만 저걸 검은색에 다 표현되게 넣을래면 일단 더 긴 쪽을 검은색에 맞게 줄여야 다 들어간다. 왜냐면 어차피 현재 축소는 전체 비율 유지 축소를 실시할 것이기 때문에 가장 긴 긴 면만 구겨서 넣으면 그보다 더 짧은 면은 어차피 구겨저 들어간다.
그렇다면 b/d를 수행하여 분수를 얻으면 그것이 빨간색을 축소시켜야 하는 aspect ratio 비율이다.
만일 검은색이 정비율이 아니라면 a/c와 b/d를 수행하여 더 많이 축소시켜야 하는 작은 값을 채택하면 될 것이다.
그래서 대충 이 값이 0.5라고 치자. 그러면 이제 사용법은
drawImage(이미지, (a-c*0.5)/2 , (b-d*0.5)/2 , c*0.5 , d*0.5 )
이다.
왜냐면
줄여서 다 넣었다고 생각해 보자, 그러면 보통 스케일링해서 사각형에 집어넣으면 그 표기 위치는 그 사각형의 정 중앙이다. 그걸 왼쪽 끝에 붙여서 이상하게 넣지는 않는다. 그러면 2번째 파라미터 값인 저 보라색 위치의 x offset은 값이 몇인가?
그걸 계산하면 (a-c*0.5)/2 이다.
다 끝났으니 이제 fill을 보자.
fill은 다 채우는것이다.
그렇다면 다시 말하자면 이미지를 구겨넣을때 한쪽이 짤리더라도 다른쪽만 전부 나오면 된다.
이게 무슨 말이고 하니 위의 fit은 세로 가로 중 더 큰 쪽을 캔버스에 맞추면 나머지는 줄이는 과정에서 캔버스보다 더 작게 줄여지는 것이고, 지금 하는 fill은 가로 세로 중 더 작은 쪽을 캔버스에 맞추면 나머지는 삐져나오겠지만 그러든지 말던지 처리하여 캔버스를 완전히 꽉 채우겠다는 것이다.
그러면 위의 식에서 ratio 구할 때 이전에는 더 많이 줄여야 하는 더 작은 값을 채택했지만
이제는 덜 줄여야 하는 더 큰 값을 채택하기만 하면 된다는 것이다.
마지막 여담으로 한번 이미지 처리를 하고 나서 재사용시 이전 이미지를 지워야 하는데
이는 canvobj.getContext("2d").clearRect(0,0,canv.width,canv.height); 로 가능하다.
이 부분은 어싱크가 아닌것으로 보인다.