如何创建画布边界限制缩放时的尺度?(fabric.js)

how to create canvas boundary limit which scales when zoomed? (fabric.js)

本文关键字：js fabric 缩放 界限 何创建 创建 布边      更新时间：2023-09-26

我已经读了一些关于这个主题的帖子，但我还没有破解我的特殊问题的解决方案。

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

预览

这里的目的是您能够放大图像，但图像在画布内始终保持可见，在拖动时没有空白。问题实际上发生在这部分代码中;

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

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

希望有人能指出我错在哪里?

谢谢

我试着稍微重构左上角的逻辑，以便它使用右下角来防止它在任何方向上离开画布。它看起来像:

  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 =预览

相关文章：