Нужна помощь в получении значений области для X, Y. Координаты из директивы AngularJS для инструмента масштабирования изображения GAE.

Question

Пытается создать инструмент для обрезки изображения для GAE с помощью AngularJS.

GAE принимает данные в таком виде, культур (left_x, top_y, right_x, bottom_y) https://developers.google.com/appengine/docs/python/images/imageclass#Image_crop

Я получил довольно далеко, но мне нужна помощь с получением значений X, Y координат из что я думаю, может быть jQlite изнутри Директивы и в область, которая может быть отправлена ​​на сервер.

Вот полный код в его нынешнем состоянии - http://jsfiddle.net/Kyle2501/jnb88/1/

пыльник код для директивы по Crop Area -

crop.directive('croparea', function($document) { 
return { 
    scope: { 
     size: '=' 
    }, 
    link: function(scope, element, attr) { 
     var startX = 25, startY = 25, x = 25, y = 25; 

     element.css({ 
      position: 'relative', 
      outline: '1px solid lightgrey', 
      backgroundColor: 'rgba(20, 20, 30, .1)', 
      cursor: 'move', 
      top: startY + 'px', 
      left: startX + 'px', 
      margin: '25px', 
     }); /// - element.css 

     scope.update_size = function() { 
      var width = scope.size, height = scope.size; 
      element.css({ 
       width: width + 'px', 
       height: height + 'px', 
      }); /// - element.css 
     }; /// - scope.update_size 

     element.bind('mousedown', function(event) { 
      startX = event.screenX - x; 
      startY = event.screenY - y; 
      $document.bind('mousemove', mousemove); 
      $document.bind('mouseup', mouseup); 
     }); 

     function mousemove(event) { 
      y = event.screenY - startY; 
      x = event.screenX - startX; 
      element.css({ 
       top: y + 'px', 
       left: x + 'px', 
       backgroundColor: 'rgba(20, 20, 30, .3)', 
      }); 
     } 

     function mouseup(scope) { 
      $document.unbind('mousemove', mousemove); 
      $document.unbind('mouseup', mouseup); 
      element.css({ 
       top: y + 'px', 
       left: x + 'px', 
       backgroundColor: 'rgba(20, 20, 30, .1)', 
      }); 
     } 

     scope.$watch('size', function() { 
      scope.update_size(); 
     }); 

    } /// - link 
} /// - return 

}) /// - директива

Благодарим Вас за помощь, предложения и советы! :)

Answer 1

Если удалить запас из кадрирования, значения легко получить:

{ 
     left_x: x, 
     top_y:y, 
     right_x: x +1*scope.size, /* size is string on change*/ 
     bottom_y: y+1*scope.size 
} 

я добавил способ визуализировать изменения, добавления scope.coorde к контроллеру и мимоходом, что в директиве так можно печатать во время игры , Вы увидите два способа обновления координат. Один находится в пределах .$watch('size'). Так как обновление области в пределах $watch мотивировано угловыми, эта версия просто меняет координаты.

В случае, если вы обновляете область видимости внутри внешнего события, необходимо использовать $.apply, так что угловые знают об изменениях и сделают дайджест для обновления DOM. Используется mouseup, чтобы произвести другое обновление координат.

Давай думать об этом ... может, вероятно, использовать ng- события вместо того, чтобы использовать element.bind, который будет автоматически обновлять DOM без $apply

ng-change для ввода диапазона будет снять часы для размера.

ng-mouseup устранило бы необходимость $.apply я использовал

DEMO