如何创建缩放时缩放的画布边界限制？ （fabric.js）

Question

我已经阅读了一些有关此主题的帖子，但我还没有针对我的特定问题破解解决方案。

这是一个plnk;

http://plnkr.co/edit/ScJGKwR74H8UjsaJqfZF?p=preview

此处的目的是您可以放大图像，但图像在画布内始终可见，拖动时没有空白区域。问题实际上发生在代码的这一部分内;

  obj = e.target;

  obj.setCoords();

  var boundingRect = obj.getBoundingRect();
  var zoom = canvas.getZoom();
  var viewportMatrix = canvas.viewportTransform;

  boundingRect.top = (boundingRect.top - viewportMatrix[5]) / zoom;
  boundingRect.left = (boundingRect.left - viewportMatrix[4]) / zoom;
  boundingRect.width /= zoom;
  boundingRect.height /= zoom;

  var pHeight = obj.canvas.height * zoom,
      pWidth = obj.canvas.width * zoom,
      nHeight = obj.canvas.height - pHeight,
      nWidth = obj.canvas.width - pWidth;

  // top-left  corner
  if (boundingRect.top < nHeight || boundingRect.left < nWidth) {
    obj.top = Math.max(obj.top, nHeight + obj.top - boundingRect.top);
    obj.left = Math.max(obj.left, nWidth + obj.left - boundingRect.left);
  }

当我点击缩放按钮时，我想要一个负数输出，因为我希望图像被拖出屏幕但不会留下任何空白区域。我有半工作，但我不知道如何获得它所以边界限制将始终计算为图像的缩放版本？

希望有人可以指出我哪里出错了？

由于

Answer 1

我尝试稍微重构左上角的逻辑，以便它使用右下角防止它从任一方向走出画布。它看起来像：

  var canvasHeight = obj.canvas.height / zoom,
    canvasWidth = obj.canvas.width / zoom,
    rTop = boundingRect.top + boundingRect.height,
    rLeft = boundingRect.left + boundingRect.width;

  // Where top left corner check used to be
  if (rTop < canvasHeight || rLeft < canvasWidth) {
    obj.top = Math.max(obj.top, canvasHeight - boundingRect.height);
    obj.left = Math.max(obj.left, canvasWidth - boundingRect.width);
  }

基本上，它不是检查图像的顶部是否超过了画布大小的差异，而是检查图像的底部是否已经从放大的画布的底部脱离。

http://plnkr.co/edit/cjAWEqrdnL6skKQYsFM2?p=preview