angular.js - 从数组中设置 fabricjs 画布的宽度和高度

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 至极是一个数组，您需要通过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();
};