Come ridimensionare l'immagine trascinando

Ho un'immagine e ho bisogno di ridimensionarla trascinandone gli angoli, ci sono delle opzioni in angularjs?Come ridimensionare l'immagine trascinando

A partire da ora sto facendo manuale dell'immagine ridimensionare in questo modo:

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

ma voglio ridimensionarlo trascinando i suoi angoli.

fonte

2016-02-24 Syed Rasheed

Speranza questa direttiva angolare aiuta

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

fonte

2016-02-26 05:38:45

Grazie, ma dovrebbe essere in grado ridimensionabile da ogni angolo –

basta aggiungere le maniglie 'elem.resizable ({maniglie: "tutti" }) 'per renderlo ridimensionabile in tutti gli angoli. Aggiornato lo snippet di codice –

Come ridimensionare l'immagine trascinando

risposta

Problemi correlati