Cách thay đổi kích thước hình ảnh bằng cách kéo

Tôi có hình ảnh và cần phải thay đổi kích thước hình ảnh bằng cách kéo các góc của hình ảnh đó, có bất kỳ tùy chọn nào trong angularj không?Cách thay đổi kích thước hình ảnh bằng cách kéo

Tính đến bây giờ tôi đang làm hình ảnh của nhãn hiệu thay đổi kích thước như thế này:

<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>

Nhưng tôi muốn thay đổi kích thước bằng cách kéo góc của nó.

Nguồn

2016-02-24 Syed Rasheed

Hope chỉ thị góc này giúp

(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"> 
 
\t 
 
    <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" /> 
 
\t <div ng-show="w">{{w}}:{{h}}px</div> 
 
</body>

Nguồn

2016-02-26 05:38:45

Cảm ơn, nhưng Nó sẽ có thể thay đổi kích thước từ mọi ngõ ngách –

bạn chỉ cần thêm tay cầm 'elem.resizable ({xử lý: "tất cả" }) 'để làm cho nó có thể thay đổi kích thước ở tất cả các góc. Đã cập nhật đoạn mã –

Cách thay đổi kích thước hình ảnh bằng cách kéo

Trả lời

Các vấn đề liên quan