javascript - FabricJS 多 Canvas 处理

Question

使用 Angular 在 foreach 循环中，我使用 Fabricjs 生成 Canvas 并附加图像和文本。我需要知道的是如何跟踪正在设置的多个 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);


   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);

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

Answer 1

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


});

这样您就可以使用键将所有 Canvas 评估为范围变量。