fabricjs несколько холстов 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 canvas + key или var canvas [key] или var canvas.key, она не работает, я получаю сообщение об ошибке для синтаксиса.

так позже я могу сделать

canvas+key.add(inputText); 

, потому что я могу следить за ключом в приложении

Answer 1

Вы можете определить массив холст на $ рамки за пределами вашего цикла Еогеасп. А затем присвойте каждому холсту значение $ 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 
       }); 


}); 

Таким образом, вы можете оценить все холсты в качестве переменной области с помощью ключа.