fabricjs多个画布处理

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是类似于var canvas + key之类的东西，以便以后可以访问特定的canvas变量以添加文本或其他元素。 任何想法。 当我尝试命名变量var canvas + key或var canvas [key]或var canvas.key时，它将无法正常工作，但语法出现错误。

所以以后我可以做

 canvas+key.add(inputText);

因为我可以跟踪应用程序中的密钥

Answer 1

您可以在foreach循环外的$ scope上定义一个画布数组。 然后将每个画布分配给$ 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
                });


});

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