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画布上是这样的变种帆布+键，这样我以后可以添加文字或其他元素访问特定的帆布变量。对此有任何想法。当我尝试命名变量var canvas + key或var canvas [key]或var canvas.key时，它不会工作，我得到语法错误。

所以后来我可以做

canvas+key.add(inputText); 

，因为我可以跟踪关键的应用程序

Answer 1

您可以定义foreach循环外面$范围画布阵列。然后将每个画布分配给$ 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 
       }); 


}); 

这样，您可以使用该键将所有画布评估为范围变量。