0

尝试使用 AngularJS 为 GAE 构建照片裁剪界面工具。

GAE 接受这种形式的数据，crop(left_x, top_y, right_x, bottom_y) https://developers.google.com/appengine/docs/python/images/imageclass#Image_crop

我已经走了很远，但我需要一些帮助来从我认为可能是 jQlite 从指令内部获取 X，Y 坐标的值并进入可以发送到服务器的范围。

这是当前状态的完整代码 - http://jsfiddle.net/Kyle2501/jnb88/1/

波纹管是作物面积指令的代码 -

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

}) /// - 指令

感谢您的帮助、建议和建议！:)

4

1 回答 1

0

如果从裁剪器中删除边距，值很容易得到：

{
      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 并将其传递给指令，以便在播放时打印。您将看到 2 种更新坐标的方法。一是内.$watch('size')。由于 a 中的范围更新$watch是由角度监控的，因此这个版本只是改变了坐标。

但是，当您从外部事件中更新范围时，必须使用$.apply这样 Angular 才能知道更改并会做一个摘要来更新 DOM。用于mouseup进行其他坐标更新。

想一想...可能可以使用ng-事件而不是使用element.bindwhich 会自动更新 DOM 而无需$apply

ng-changefor range 输入将删除监视大小。

ng-mouseup将消除$.apply我使用的需要

DEMO

于 2013-11-07T03:46:32.477 回答