4

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

有没有办法告诉 jcrop 图像已旋转？

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

指令.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);
     }
    };
   })
4

3 回答 3

3

问题与裁剪旋转图像时使 Jcrop 跟踪器不旋转相同

JCrop 被 JQuery rotate 旋转后存在选择方向错误的问题。我必须通过更改 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

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

当心！您应该在每次旋转单击后传输旋转选项：

jCropApi.setoptions({rotate : 90});  //rotate 90
于 2013-12-27T04:36:09.720 回答
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];
        }
于 2014-02-27T14:37:31.517 回答
2

乔治的答案是迄今为止我见过的最好的答案，除了它不处理非直角的角度（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];
}
于 2015-05-27T18:26:40.043 回答