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


})

我试图用ng-click在我的index.html中设置画布大小，如下所示：

<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()没有宽度和高度的参数

presetSizes.width是什么？ 我在您的控制器中看不到此变量。 如果您的意思是$scope.presetSizes wich是一个数组，则需要通过诸如$scope.presetSizes[0].width类的index访问height和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();
};