angular.js - 設置陣列的寬度和高度farbricjs畫布

Question

我必須在我的應用程序內更改我的fabric.js畫布大小。在我有這個定義我controller.js：

kitchensink.controller('CanvasControls', function ($scope) { 

    $scope.canvas = canvas; 
    $scope.getActiveStyle = getActiveStyle; 

    addAccessors($scope); 
    watchCanvas($scope); 

    // Editing Canvas Size 
    // ================================================================ 

    $scope.setCanvasSize = function() { 
     console.log('Resizing now...'); 
     canvas.setWidth(presetSizes.width); 
     canvas.setHeight(presetSizes.height); 
     canvas.calcOffset(); 
    }; 

    $scope.presetSizes = [ 
     { 
      name: 'iPad Landscape', 
      height: 768, 
      width: 1024 
      }, 
     { 
      name: 'iPad Portrait', 
      height: 1024, 
      width: 766 
      }, 
     { 
      name: 'iPad Pro Landscape', 
      height: 1024, 
      width: 1366 
      }, 
     { 
      name: 'iPad Pro Portrait', 
      height: 1366, 
      width: 1024 
      } 
     ]; 


}) 

我想設置我的畫布大小在我的index.html與NG-點擊這樣的：

<x-menu> 
    <x-menuitem value="no_bg" ng-click='setCanvasSize(size.width, size.height)' ng-repeat='size in presetSizes' selected="true"> 
     <x-label>{{ size.name }}</x-label> 
    </x-menuitem> 
</x-menu> 

我收到陣列{{ size.name }}但我明明做錯事的設置/獲取寬度和高度...

Answer 1

您不必爲寬度和高度在setCanvasSize()

參數0

接下來是什麼presetSizes.width？我沒有看到你的控制器中的這個變量。如果你的意思$scope.presetSizes至極是一個數組，你需要通過一個index訪問height和width像$scope.presetSizes[0].width

嘗試$scope.setCanvasSize = function()改變你$scope.setCanvasSize = function (width, height)或$scope.setCanvasSize = function (index) 和使用它像

$scope.setCanvasSize = function (index) { 
    console.log('Resizing now...'); 
    canvas.setWidth($scope.presetSizes[index].width); 
    canvas.setHeight($scope.presetSizes[index].height); 
    canvas.calcOffset(); 
}; 
//This one suits your question 
$scope.setCanvasSize = function (width, height) { 
    console.log('Resizing now...'); 
    canvas.setWidth(width); 
    canvas.setHeight(height); 
    canvas.calcOffset(); 
};