fabricjs 여러 canvases handeling

Question

foreach 루프에서 저는 Fabricjs를 사용하고 이미지와 텍스트를 첨부하여 캔버스를 생성하고 있습니다. 내가 알아야 할 것은 여러 캔버스 변수를 추적하는 방법입니다.

angular.forEach($scope.data, function (obj, key) { 
    var newCanvas = document.createElement('canvas'); 
    newCanvas.id = 'variableCanvas'+key; 
    var body = document.getElementById("canvasContainer"); 
    body.appendChild(newCanvas); 


    var canvas = new fabric.Canvas('variableCanvas'+key, { 
        backgroundColor: 'rgb(215,215,215)', 
        selectionColor: 'blue', 
        width: $scope.width, 
        height: $scope.height, 
        centeredRotation: true, 
        centeredScaling: true, 
        canvasKey: key 
       }); 


}); 

문제는 내가 나중에 텍스트 또는 다른 요소를 추가하려면 특정 캔버스 변수에 액세스 할 수 있도록 VAR 캔버스 + 키 같은 것을 할 var에 캔버스를 만들 필요가있다. 이것에 대한 아이디어. 변수 var canvas + key 또는 var canvas [key] 또는 var canvas.key의 이름을 지정하려고하면 구문에 오류가 발생합니다. 나는 당신이 당신의 foreach 루프 외부 $ 범위에 캔버스 배열을 정의 할 수 있습니다 응용 프로그램에서

Answer 1

을 키를 추적 할 수 있기 때문에

그래서 나중에 내가

canvas+key.add(inputText); 

을 할 수 있습니다. 각 캔버스를 $ scope.canvas [key]에 할당합니다. 코드는 다음과 같습니다 :

$scope.canvas = []; 
angular.forEach($scope.data, function (obj, key) { 
    var newCanvas = document.createElement('canvas'); 
    newCanvas.id = 'variableCanvas'+key; 
    var body = document.getElementById("canvasContainer"); 
    body.appendChild(newCanvas); 


    $scope.canvas[key] = new fabric.Canvas('variableCanvas'+key, { 
        backgroundColor: 'rgb(215,215,215)', 
        selectionColor: 'blue', 
        width: $scope.width, 
        height: $scope.height, 
        centeredRotation: true, 
        centeredScaling: true, 
        canvasKey: key 
       }); 


}); 

이렇게하면 키를 사용하여 모든 캔버스를 범위 변수로 평가할 수 있습니다.