Jcrop将旋转集成到其中

Jcrop integrating rotatation into

本文关键字：集成旋转 Jcrop 更新时间：2023-09-26

嗨，当我旋转裁剪的图像时，我的裁剪选择器有问题。当使用 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);
     }
    };
   })

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

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

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

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

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

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

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

乔治的答案比我见过的任何其他答案都有效，除了它不处理非直角的角度(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];
}