javascript - angular.js - 从数组设置 farbricjs Canvas 的宽度和高度

Question

我必须更改应用程序内的 fabric.js Canvas 大小。我在我的 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 中设置 Canvas 大小，如下所示:

<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是什么？我在你的 Controller 中没有看到这个变量。如果您的意思是 $scope.presetSizes 是一个数组，您需要通过 index 访问 height 和 width就像$scope.presetSizes[0].width

尝试将 $scope.setCanvasSize = function () 更改为 $scope.setCanvasSize = function (width, height) 或 $scope.setCanvasSize = function (索引) 并像这样使用它

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