여러 패브릭 js 캔버스의 경우 메모리를 관리하는 방법은 무엇입니까?

제 신청서에는 복수 Fabric.js 캔버스가 있습니다. 캔버스 수에는 제한이 없습니다. Fabric.js 메서드 loadFromJson을 통해 무거운 JSON을 렌더링하겠습니다.여러 패브릭 js 캔버스의 경우 메모리를 관리하는 방법은 무엇입니까?

캔버스를 사용하지 않는 경우 패브릭 개체 메모리를 해제하고 싶습니다. 어떻게해야합니까?

한 번에 하나의 캔버스 만 표시됩니다. 하지만 페이지가로드 될 때 모든 캔버스를 렌더링해야합니다. 캔버스는 실제로 페이지이고 사용자는 페이지 번호 또는 다른 것을 클릭하여 페이지간에 전환 할 수 있습니다.

사용자는 언제든지 어떤 캔버스로 돌아와서 낙서를하거나 다른 Fabric.js 기능을 사용할 수 있습니다. 나중에 사용할 수 있도록

<style> 
.fabricCanvas { 
    border: 1px solid green; 
    margin: 5px; 
} 

.canvas-container { 
    margin: 5px;  
} 
</style> 
<canvas class="fabricCanvas" width="300" height="300"></canvas> 
<canvas class="fabricCanvas" width="300" height="300"></canvas> 
<canvas class="fabricCanvas" width="300" height="300"></canvas> 
<canvas class="fabricCanvas" width="300" height="300"></canvas>

내 JS 코드는 내가 인스턴스를 저장하고 직물 인스턴스

var canvasInstances = []; 
$('canvas.fabricCanvas').each(function() { 
    var fabricCanvasObj = new fabric.Canvas(this, { 
    isDrawingMode: true 
}); 
    canvasInstances.push(fabricCanvasObj); 
    fabricCanvasObj.renderAll(); 
}); 
console.log(canvasInstances[0]);

를 저장하기 :

여기 내 HTML 구조입니다. 나는 더 나은 메모리 관리를 원한다. 기본적으로 필요할 때 인스턴스를로드하고 언로드한다.

샘플 상황 DEMO 여기입니다. 이 데모에서는 캔버스가 z- 인덱스를 사용하여 서로 위에 있음을 고려하지만 DOM의 일부이며 페이지로드시 이미 렌더링되었습니다.

의심의 여지가 있으면 알려주세요. 더 설명 할 수 있습니다.

내가 생각하는 메모리 문제는 5 개 이상의 캔버스 iPad 브라우저가 충돌 할 때가 있습니다.

출처

2013-09-26 ʞɹᴉʞ ǝʌɐp

안녕하세요! 나는 Kanpur에도 있고 Fabric.js 앱을 사용하고 있습니다. 연락 할 수 있니? 내 이메일 - [email protected] –

당신은 (의미/파괴의 순서로) 3 일에 관심이있을 수 있습니다

canvas.clear()는 - 그것에서 모든 캔버스 객체를 제거합니다.
canvas.dispose() - 모든 캔버스 객체를 제거하고, 모든 이벤트 청취자
(예시적인 목적 jQuery를 사용)
$(canvas.wrapperEl).remove() 제거 - (직물에서 사용 상하 캔버스 포함) 캔버스 래퍼 요소를 제거 하였다. 목표가 문서에서 패브릭 캔버스를 완전히 제거하는 것이라면 dispose를 호출 한 후에이 작업을 수행 할 수 있습니다.

출처

2013-09-27 22:37:48 kangax

여러 패브릭 js 캔버스의 경우 메모리를 관리하는 방법은 무엇입니까?

답변

관련 문제