Question

我正在使用EaselJs创建一个简单的图像裁剪工具（类似于this）。到目前为止，我已经编写了大部分代码，除了一个小问题。我想拖动它时图像保留在容器内。换句话说，我不希望背景显示在图像下。

请参阅我的代码：

var img = new Image();
var canvas, stage, bmp;

img.src = 'http://i.imgur.com/wMW4nDL.jpg?timestamp=' + Math.random();
img.crossOrigin = 'anonymous';

img.onload = function() {  
  canvas = document.getElementById('canvas');
  stage = new createjs.Stage(canvas);
  bmp = new createjs.Bitmap(img).set();

  bmp.on("pressmove", function(evt) {
    var ct = evt.currentTarget;

    ct.x = evt.stageX;
    ct.y = evt.stageY;

    stage.update();
  });

  bmp.on('mousedown', function(evt) {
    var ct = evt.currentTarget,
      local = ct.globalToLocal(evt.stageX, evt.stageY),
      nx = ct.regX - local.x,
      ny = ct.regY - local.y;
    //set the new regX/Y
    ct.regX = local.x;
    ct.regY = local.y;
    //adjust the real-position, otherwise the new regX/Y would cause a jump
    ct.x -= nx;
    ct.y -= ny;
  });
  
  bmp.regX = img.width / 2;
  bmp.regY = img.height / 2;
  bmp.x = bmp.y = 300;
  bmp.scaleX = bmp.scaleY = 0.5;
  
  bmp.rotation = 90;
  stage.addChild(bmp);  
  stage.update();
}

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

<canvas id="canvas" width="600" height="200" style="cursor:move;border:2px solid red">Canvas is not supported</canvas>

运行代码并继续拖动图像。很快，图像就会越过画布，你将开始看到它下方的白色画布。如果图像的顶角相对于画布大于（0,0），我希望图像停止拖动。同样的底部，如果在击中画布底部后拖动图像的底部，我希望它停止拖动。

如何更新我的代码，以便图片在超出画布时停止拖动？（从左上角，左下角，右上角或右下角）

Answer 1

我最近做了类似于createJS的事情。基本上你想要做的是限制mvn generate-sources pmd:pmd监听器中图像的移动，如下所示：

pressmove

当然适用于所有可能的移动场景。

下面是我用来强制执行这些精确边界的自己代码的一部分。然而，在我自己的代码中有什么不同之处在于我还必须强制执行放大图像的边界。也许它对你有用。

if (ct.x > 0){
    ct.x = 0;
}

EaselJs：如何限制画布内的图像移动（缩放或旋转后）？

1 个答案: