자바스크립트 이미지 회전

조회수 1376회

html5에서 js로 이미지를 회전 시키는 함수를 구현하고 있습니다. prompt로 각도를 입력받는 만큼 이미지를 회전시키려고 하는데 사용한 변수는 아래와 같습니다.

outImgArr[][] // 원본 이미지
tarr[][]    // 출력할 이미지 배열
oldheight, oldwidth    //원본의 너비/높이
newheight, newwidth    //출력 이미지의 너비/높이
cnewheight, cNewWidth    //출력이미지 너비/높이의 반값
rad    //입력할 각도를 라디안으로 바꾼 값
alpha    // (oldheight,oldwidth)점과 x축과의 각도
beta        // sqrt(oldheight**2 + oldwidth**2) 빗변의 길이

tarr를 초기화 시킨 후,

newheight = parseInt(beta * Math.abs(Math.sin(rad+alpha)));
newwidth = parseInt(Math.abs(oldheight*Math.sin(rad)+oldwidth*Math.cos(rad)));

위와 같이 새로운 높이,너비를 구했습니다.

            for (var i = 0; i < oldHeight; i++) {
                for (var j = 0; j < oldWidth; j++) {
                    var h= parseInt((i-cnewheight)*Math.cos(rad)-(j-cNewWidth)*Math.sin(rad)+oldheight/2);
                    var w= parseInt((i-cnewheight)*Math.cos(rad)+(j-cNewWidth)*Math.sin(rad)+oldwidth/2);

                    if((0<=h&& h<oldheight) && (0<=w&& w<oldwidth)){
                        tarr[i][j] = outImgArr[h][w];
                    }

                }
            }

그리고 위와 같이 이중for문을 통해 tarr에 새로운 값을 넣었습니다. 예상대로라면 회전시킨 이미지가 정사각형으로 나와서 끝 부분이 잘리지 않아야 하는데 결과는 잘려서 나옵니다..

왜 그런 건지 알려주시면 감사하겠습니다.

원본 이미지

결과

이미지

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)