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


});

通过这种方式，您可以使用键将所有画布评估为范围变量。

fabricjs多个画布处理

1 个答案: