角度圖像拖動和縮放

您好我有這樣的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

角度圖像拖動和縮放

回答

相關問題