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


}); 

這樣，您可以使用該鍵將所有畫布評估爲範圍變量。