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

时间:2017-07-10 11:26:00

标签: javascript angularjs fabricjs

我必须在我的应用内更改我的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 }}获取数组,但我显然在设置/获取宽度和高度时出现了问题......

1 个答案:

答案 0 :(得分:0)

setCanvasSize()

中没有宽度和高度的参数

接下来是什么presetSizes.width?我在控制器中看不到这个变量。如果您的意思是$scope.presetSizes,那么您需要通过height widthindex$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(); }; 并像

一样使用它
type
  TFirstClass = class of TFirst;

constructor TFirst.Create;
begin
  Writeln('TFirst.Create');
end;

constructor TSecond.Create;
begin
  Writeln('TSecond.Create');
end;

var
  firstClass: TFirstClass;
  first: TFirst;
begin
  firstClass := TSecond;
  first := firstClass.Create;
end.