gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 14:10:34 26 4
gpt4 key购买 nike

我有一个图像,需要通过拖动它的 Angular 来调整它的大小,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>

但我想通过拖动它的 Angular 来调整它的大小。

最佳答案

希望这个 Angular 指令有帮助

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

关于angularjs - 如何通过拖动调整图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35593077/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com