Question

当我旋转jcropped图像时，我遇到了jcrop选择器的问题。当用css旋转图像时，我的jcrop选择器以相反的方式移动。我相信这是因为jcrop没有意识到它已经旋转并且选择器正在根据原始图像尺寸移动。

我有办法告诉jcrop图像是否已旋转？

顺便说一句，我使用angularjs指令来实现jcrop（它是一个angularjsapp）。感谢

directive.js

.directive('imgCropped', function() {
return {
    restrict: 'E',
    replace: true,
    scope: {src: '@', selected: '&'},
    link: function(scope, element, attr) {
        var myImg;
        var clear = function() {
            if (myImg) {
                myImg.next().remove();
                myImg.remove();
                myImg = undefined;
            }
        };
        scope.$watch('src', function(nv) {
            clear();
            if (nv) {
                element.after('<img degrees="angle" rotate/>');
                myImg = element.next();
                myImg.attr('src', nv);

                $(myImg).Jcrop({
                    trackDocument: true,
                    onSelect: function(x) {
                        /*if (!scope.$$phase) {
                         scope.$apply(function() {
                         scope.selected({cords: x});
                         });
                         }*/
                        scope.selected({cords: x});
                    },
                    keySupport: false,
                  aspectRatio: 1,
                    boxWidth: 400, boxHeight: 400,
                    setSelect: [0, 0, 400, 400]
                }, function(){
                     jcrop_api = this;
                });
                //$(myImg).rotate(90);


            }
        });
        scope.$on('$destroy', clear);
     }
    };
   })

Answer 1

问题与Make Jcrop tracker not rotate when cropping a rotated image

相同

JCrop在通过JQuery旋转旋转后出现选择方向错误的问题。我必须通过更改JCrop的js代码来解决它，以支持旋转。

幸运的是，这并不难，您可以通过更换一行来自己完成：136到子代码：

    //========= begin replace origin line 136 for rotate
    var x = pos[0] - lloc[0];
    var y = pos[1] - lloc[1];
    var rotate = options.rotate || 0;
    var angle = (rotate / 90) % 4;
    if (angle == 1) {
      var temp = x;
      x = y;
      y = - temp;
    } else if (angle == 2) {
      x = -x;
      y = -y;
    } else if (angle == 3) {
      var temp = x;
      x = -y;
      y = temp;
    }
    Coords.moveOffset([x, y]);
    //========= end replace origin line 136 for rotate

或者您可以通过网址获取更新的代码：https://github.com/ergoli/Jcrop/tree/master/js

小心！你应该在每次旋转点击后转移旋转选项：

jCropApi.setoptions({rotate : 90});  //rotate 90

Answer 2

最好更改此功能，以便它可以影响所有功能，而不仅仅是移动选定的区域。

function mouseAbs(e) //{{{
        {
            //return [(e.pageX - docOffset[0]), (e.pageY - docOffset[1])];
            var x = e.pageX - docOffset[0];
            var y = e.pageY - docOffset[1];
            var rotate = options.rotate || 0;
            var angle = (rotate / 90) % 4;
            if (angle == 1) {
                var temp = x;
                x = (e.pageY - docOffset[1]);
                y = -(e.pageX - docOffset[0] - $('.jcrop-holder').height());
            } else if (angle == 2) {
                x = -(e.pageX - docOffset[0] - $('.jcrop-holder').width());
                y = -(e.pageY - docOffset[1] - $('.jcrop-holder').height());
            } else if (angle == 3) {
                var temp = x;
                x = -(e.pageY - docOffset[1] - $('.jcrop-holder').width());
                y = (e.pageX - docOffset[0]);
            }
            return [x, y];
        }

Answer 3

乔治的答案远远超过我见过的任何其他答案，除了它不处理不是直角（80度，150度等）的角度。

基于this algorithm，这是我想出的：

    function mouseAbs(e) //{{{
{
  //return [(e.pageX - docOffset[0]), (e.pageY - docOffset[1])];
  var x = e.pageX - docOffset[0];
  var y = -(e.pageY - docOffset[1]);
  var centerY = -($j('.jcrop-holder').height() / 2);
  var centerX = $j('.jcrop-holder').width() / 2;
  var rotate = options.rotate || 0;
  // radians
  rotate = rotate * Math.PI / 180;
  var x2 = x - centerX;
  var y2 = y - centerY;
  var cos = Math.cos(rotate);
  var sin = Math.sin(rotate);
  x = x2 * cos - y2 * sin + centerX;
  y = x2 * sin + y2 * cos + centerY;
  return [x, -y];
}

Jcrop将旋转整合到

3 个答案: