Question

我正在使用ngCropper，但我想动态更改按钮点击时的宽高比，就像它在javascript cropper（https://fengyuanchen.github.io/cropper/）中发生的那样

这是我写的默认选项，

vm.options = {
   maximize: true,
   viewMode: 3,
   aspectRatio: 2 / 3,
   crop: function(dataNew) {
        data = dataNew;
   }
};

前端触发器中有2个按钮 ng-click = vm.cropHorizontal()或ng-click = vm.cropSquare()

function cropHorizontal() {
     vm.options = {
        aspectRatio: 2 / 3,
        crop: function(dataNew) {
            data = dataNew;
       }
    };
}

function cropSquare() {
   vm.options = {
      aspectRatio: 1 / 1,
      crop: function(dataNew) {
          data = dataNew;
      }
   };
}

当我在函数中记录某些内容时，我正在登录控制台但无法更改宽高比。

请帮忙。提前谢谢。

Answer 1

您需要修改ngCropper指令，并在options.aspectRatio上添加观察者，如下所示：

    scope.$watch('options.aspectRatio', function (aspectRatio) {
            if (!shown) return;
            element.cropper("setAspectRatio", aspectRatio);
    });

此代码可能在options.disabled watcher之后。

在自定义JS中，当宽高比复选框更改时，调用一个函数：

    $scope.updateAspectRatio = function () {
        $scope.options.aspectRatio = $scope.aspectRatio ? 2 / 1 : NaN;        
    }

ngCropper - 点击按钮

1 个答案: