fabricjs 多个画布处理答案

【问题标题】：fabricjs multiple canvases handlingfabricjs 多个画布处理
【发布时间】：2015-04-06 00:11:09
【问题描述】：

使用角度在 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);

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

【问题讨论】：

标签： javascript angularjs html canvas fabricjs

【解决方案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
                });


});

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

【讨论】：