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

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

如果你的鼠标掉了下来＆＃39;事件在x＆gt;触发image_width - 20和y＆gt; image_height - 20。那么你的调整大小将是40px。

现在你可以设置一个标志isResizing = true并继续你的鼠标移动＆＃39;事件。检查鼠标x，y是否变大并更新大小。

鼠标中＆＃39; event将标志isResizing设置为false。

以下是如何实现这一目标的简单示例：

更新了你的plunkr： plnkr.co/edit/usMgsq?p=preview

你需要改进这个，但是你明白了

角度图像拖动和调整大小

1 个答案: