2011-10-03 7 views
7

회전 된 이미지 데이터를 캔버스에 그려야합니다. (이것은 GWT 프로젝트이며, 문맥 com.google.gwt.canvas.dom.client.Context2d의 인스턴스)회전 된 캔버스에서 putImageData()가 올바로 작동하지 않습니다.

나는 그것에 대해 다음 코드를 사용하려고 :

context.rotate(rotation); 
context.putImageData(data, x, y); 
context.rotate(-rotation); 

을하지만 그렇지 그릴 회전 된 이미지. 이런 코드를 바꾸면

context.rotate(rotation); 
context.fillRect(x, y, 100, 50); 
context.rotate(-rotation); 

회전 된 사각형보다 캔버스에 그려집니다. API 버그입니까 아니면 내 버그입니까? 문제를 해결하려면 어떻게해야합니까?

편집 됨 나는 다른 이미지 대신에 putImageDate()를 사용하여 어떻게 작동하는지 테스트 해 봅니다. 그것은 회전 괜찮 작동합니다. 하지만 다른 캔버스 형태보다 ImageData를 그릴 필요가 있습니다. ImageData를 ImageElement로 변환하는 빠른 방법일까요? ImageData가 어떤 단위로 크기를 반환합니까?

답변

11

글쎄, 네 잘못이야. putImageData은 변환 행렬의 영향을받지 않습니다.

전류 경로, 변환 행렬, 그림자 특성, 글로벌 알파, 클리핑 영역 및 getImageData() 및 putImageData 영향을주지해야 글로벌 조성물 연산자() 메소드 :

는 사양의 명령에 의해 인 . 당신이 할 수있는 일

는 메모리 캔버스 putImageData이며, 일반 캔버스에 다음

context.rotate(rotation); 
context.drawImage(inMemoryCanvas, x, y) 
context.rotate(-rotation); 

.

참고 : 편집에서 당신은 하나의 캔버스에서 다른 캔버스로 그림을 변경하지 않고 그림을 그릴 수 있음을 암시하는 것처럼 보입니다. 이 경우 가능한 경우 getImageDataputImageData 대신 drawImage(othercanvas, x, y)을 사용하십시오. drawImage을 사용하면 훨씬 빠릅니다.

+0

당신 말이 맞습니다. 임시 캔버스에서 모든 조작을 한 다음 원래 캔버스의 올바른 위치에 배치합니다. 답변 해 주셔서 감사합니다. 제게 많은 도움이됩니다. – hatesms

관련 문제