내 캔버스 응용 프로그램의 속도를 높이는 힌트

Question

이것은 웹 개발, Canvas, HTML5에 관한 것입니다.

저는 HTML5 Canvas 및 JQuery로 페인트 응용 프로그램을 개발하고 있습니다. 여러 레이어를 그릴 수 있으며 돋보기 효과로 동적 확대/축소가 가능합니다.

배경 :

• 캔버스 BG

층 :

아키텍처는 여러 캔버스

• layer0

• 레이어 1

• 계층 2

...

• layerN

도구 :

• 유령 (t o 사용자가 선을 그릴 때 "유령"선을 표시하십시오. 마우스

• 가 확대 레이어) 추첨을 확인 방출

내 문제는 줌입니다. 효과를 얻으려면 magnify-layer에서 모든 레이어를 다시 그려야합니다. 물론 2000 * 2000의 그림을 그릴 때 매우 느립니다. Moreoften을 사용하면 magnify-glass를 움직여 어디서든지 확대/축소 할 수 있으며, 다시 그리기는 MouseMoveEvent에서 호출됩니다.

더 빨리 얻으려면 (전체 레이어 대신) 유리 아래에 작은 영역 만 그립니다. 그러나 여전히 느립니다. 어떻게하면 속도를 높일 수 있습니까?

그림 : http://imgur.com/hAtYsZi

당신은 영역이 확대 된 검은 원에 볼 수 있습니다. 내가 시작하려면이 코드를 사용 :

데모 : http://www.script-tutorials.com/demos/167/index.html

Answer 1

이 시도를 ... 그것은 도움이 될 수 있습니다.

저는 전통적인 "돋보기"를하고 있다고 생각합니다. 해상도를 낮추고 전체 해상도로 "확대"하고 있습니다.

사용자가 돋보기 도구를 선택하면 모든 레이어를 다른 캔버스로 "평평하게"만듭니다.

그런 다음 평면 캔버스를 1/2 해상도로 이미지에 저장하십시오. 이것은 당신의 확대되지 않은 배경이됩니다.

마침내 확대 트릭을 수행합니다. 평평한 캔버스에서 적절한 픽셀을 잡고 부동 돋보기에 표시합니다.

예, 이미지를 평평하게하는 데 약간의 오버 헤드가 있지만 사용자가 돋보기를 선택하고 위치시킬 때까지 오프셋 될 수 있습니다.