그림판 인터페이스 (예 : 페인트 또는 포토샵)를 HTML5 캔버스 요소로 통합하는 응용 프로그램에서 작업하고 있습니다.HTML5 캔버스 및 내용 크기 조정 및 크기 조절
확대/축소 기능을 시뮬레이션하기 위해 캔버스 요소와 픽셀 데이터의 크기를 동적으로 조정할 수 있기를 바랍니다. 내 생각에는 캔버스 요소가 포함 된 뷰포트가 있습니다. 그런 다음 캔버스와 그 내용을 뷰포트 내부에서 크기를 조정할 수 있습니다 (동일한 크기로 유지됨).
이 기능을 가장 잘 구현하려면 어떻게해야합니까?
다른 캔버스를 도입하여 드로잉 표면에서 디스플레이를 분리하면 매우 쉽게 수행 할 수 있습니다.
var canvas = document.createElement('canvas');
다음을 사용하여 숨겨진 캔버스 만들기 전체 장면을이 캔버스에 그립니다. 그런 다음이 캔버스의 내용을 drawImage 메서드를 사용하여 실제로 볼 수있는 다른 캔버스에 그립니다 (이미지 대신 캔바스가 나타날 수도 있음). 장면을 확대하려면 비주얼 캔버스로 그릴 때 숨겨진 캔버스의 원본 사각형 (sy, sx, sw 및 sh의 매개 변수는 drawImage)을 작게하여이 작업을 수행 할 수 있습니다. 이렇게하면 확대/축소 효과가 나타납니다.
그러나 캔버스에서 각 프레임을 완전히 다시 그리면 캔버스 개체의 scale method을 볼 수도 있습니다.
감사합니다. 나에게 시작하기 좋은 장소를 제공해 주셨습니다. –
나는 +1을 다음에 복창 할 것이다. –
나는 시도했다. 그러나 나는 나의 계정이 아직 그것을 할 수 있다고 생각하지 않는다. :( 당신은 여전히 잘된 직업에 대한 만족감을 얻습니다. : D –
저는 캔버스 요소와 그 내용에 transform : scale()을 사용하여 성공했습니다. 그러나 canvas 요소를 iframe과 함께 가져와야하고 transform : scale이 iframe에서 발생하는 경우 사파리에서는 작동하지만 모바일 사파리에서는 작동하지 않습니다.
아래 관련 링크를 당신은'.toDataURL를 사용하여 '스크린 샷'() '에 저장 한 후 캔버스의 크기를 조정하고 뻗어 그 스크린 샷을 그릴 수 있습니다. 그러나 캔버스가 'pixelatedly'크기를 조정하지 않기 때문에 흐리게 보입니다. – pimvdb
가능한 복제본 : http://stackoverflow.com/questions/331052/how-to-resize-html-canvas-element –