javascript-如何创建缩放时缩放的画布边界限制？ (fabric.js)

我已经阅读了有关此主题的几篇文章,但是我还没有为我的特殊问题提供解决方案.

这是a

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

当我单击缩放按钮时,我希望输出一个负数,因为我希望将图像拖出屏幕,但不要留下任何空白.我有一半工作,但是我不确定如何获得它,因此边界限制将始终根据图像的缩放版本进行计算吗？

希望有人指出我要去哪里了吗？

谢谢

解决方法:

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

  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

标签：canvas,html5-canvas,fabricjs,javascript
来源： https://codeday.me/bug/20191026/1937739.html