角度图像拖动和缩放

您好我有这样的plunkr有拖动图像我需要的是我想补充resizable属性角度图像拖动和缩放

这是我的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); 
    } 
    }; 
}])

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

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

任何人都可以帮助我。

来源

2014-12-19 CaffeineShots

使用拉斐尔JS为此。这是一个JavaScript库，可以完成您需要的所有功能。 – Ved

首先，你需要捕捉您的实际resize事件需要发生，即图像的右下角的指定startPosition，

如果你的鼠标“向下”事件在X> IMAGE_WIDTH射击 - 20和y> image_height - 20. 然后你的resize矩形将是40px。

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

在鼠标'up'事件中，将标志isResizing设置为false。

这里是你如何能做到这一点一个简单的例子：

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

您将需要提高，虽然这一点，但你得到想法

来源

2014-12-19 12:37:48 Buster

有道理，谢谢 – CaffeineShots

角度图像拖动和缩放

回答

相关问题