javascript - Angular 图像拖动并调整大小

Question

嗨，我有这个plunkr具有可拖动图像我需要的是我想添加可调整大小的属性

这是我的html

        Size <input type="number" ng-model="updatesize">
        Position X <input type="number" ng-model="updateX">
        Positon Y <input type="number" ng-model="updateY">
        <div style ="width:900px; height:400px; background-color:red">  

            <img my-resize  my-draggable src="../coffee.jpg" style="width:{{updatesize}}px; top:{{updateY}}px; left:{{updateX}}px; position:relative; cursor:pointer">

        <div>

这是我的 script.js

angular.module('myApp', [])
.controller('mainController',['$rootScope', '$scope', function($rootScope, $scope) {



  $scope.updatesize = 250;
  $scope.updateX = 60;
  $scope.updateY = 70;
}])

.directive('myDraggable', ['$document', function($document) {
  return function(scope, element, attr) {
    var startX = 0, startY = 0, x = 0, y = 0;

    element.css({
     position: 'relative',
     width: scope.updatesize + 'px',
     top: scope.updateY + 'px',
     left: scope.updateX + 'px',
     cursor: 'pointer'
    });

    element.on('mousedown', function(event) {
      // Prevent default dragging of selected content
      event.preventDefault();
      startX = event.pageX - x;
      startY = event.pageY - y;
      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove(event) {
      y = event.pageY - startY;
      x = event.pageX - startX;

      scope.updateX = x;
      scope.updateY = y;

      scope.$apply();

      element.css({
        top: y + 'px',
        left:  x + 'px'
      });
    }

    function resize(event){

    }


    function mouseup() {
      $document.off('mousemove', mousemove);
      $document.off('mouseup', mouseup);
    }
  };
}])

当我们编辑文本框中的值时，图像会做出响应。

如果实现了可调整大小，我需要将该宽度像素值作为大小文本框的值。

谁能帮帮我。

Answer 1

首先，您需要捕获实际调整大小事件需要发生的起始位置，即图像的右下角，

如果您的鼠标“按下”事件在 x > image_width - 20 和 y > image_height - 20 处触发。那么你的调整大小矩形将为 40px。

现在您可以设置标志 isResizing = true 并继续处理鼠标“移动”事件。检查鼠标x,y是否变大并更新尺寸。

在鼠标“向上”事件中将 isResizing 标志设置为 false。

以下是如何实现此目标的简单示例:

更新了你的 plunkr:plnkr.co/edit/usMgsq?p=预览

虽然你需要改进这一点，但你明白了