Jcrop integrating rotation into

Question

Hi, I am having a problem with the jcrop selector when I rotate my jcropped image. When the image is rotated using css, my jcrop selector moves the other way around. I believe this is because jcrop does not understand that it rotates, and the selector moves in accordance with the original image size.

Is there a way to show jcrop that the image is rotated?

Btw I use the angularjs directive to implement jcrop (this is angularjsapp). Thanks

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

, Jcrop

JCrop JQuery. , JCrop js .

Fortunatly, , , : 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

URL: 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 ..).

, :

    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];
}