자바스크립트 이미지 회전
조회수 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에 새로운 값을 넣었습니다. 예상대로라면 회전시킨 이미지가 정사각형으로 나와서 끝 부분이 잘리지 않아야 하는데 결과는 잘려서 나옵니다..
왜 그런 건지 알려주시면 감사하겠습니다.
원본
결과
댓글 입력