angularjs – 如何通过拖动调整图像大小

发布时间：2020-12-17 17:41:35 所属栏目：安全来源：网络整理

导读：我有一个图像,需要通过拖动角来调整大小,angularjs中有任何选项吗？截至目前我正在做手动图像调整大小如下： img src="~/Content/images/login-logo.png" width="{{image.width}}" height="{{image.size}}"/div class="right-wrapper" h3 class="right-head

我有一个图像,需要通过拖动角来调整大小,angularjs中有任何选项吗？

截至目前我正在做手动图像调整大小如下：

<img src="~/Content/images/login-logo.png" width="{{image.width}}" height="{{image.size}}"/>
<div class="right-wrapper">
  <h3 class="right-head">Appearance <img src="~/Content/images/info-icon.png"></h3>
  <div ng-if="isImage">
      <div ng-class="form-group">
          size
          <input class="form-control" type="textbox" ng-model="image.size" />
      </div>
      <div ng-class="form-group">
          width
          <input class="form-control" type="textbox" ng-model="image.width" />
      </div>
  </div>
</div>

但是我想通过拖动它来调整它的大小.

解决方法

希望这个角度指令有所帮助

(function () {
  'use strict';

  angular.module('myApp',[])

  .directive('resizable',function () {

    return {
        restrict: 'A',scope: {
            callback: '&onResize'
        },link: function postLink(scope,elem,attrs) {
            elem.resizable({handles: "all"});
            elem.on('resize',function (evt,ui) {
              scope.$apply(function() {
                if (scope.callback) { 
                  scope.callback({$evt: evt,$ui: ui }); 
                }                
              })
            });
        }
    };
  })


  .controller('MainCtrl',function ($scope) {

    $scope.resize = function(evt,ui) {
      //console.log (evt,ui);
      $scope.w = ui.size.width;
      $scope.h = ui.size.height;
    }

  });

})();

<head>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
</head>

<body class="jumbotron" ng-controller="MainCtrl" ng-app="myApp">
	
  <h2>Resizable directive in AngularJS and jQueryUI</h2>
  <p>Drag the cursor to resize</p>
  
  <img src="http://dummyimage.com/600x400/fff/000" resizable on-resize="resize($evt,$ui)" width="200" height="200" />
	<div ng-show="w">{{w}}:{{h}}px</div>
</body>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!