防止在背景之外缩放-fabric.js

Question

我正在使用 fabric.js 生成带背景的画布。我想添加缩放并关注this guide。

但是当.zoomToPoint() 与背景一起使用时，它可以不对齐并显示一个白色的空白画布。在我的jsfiddle 或下方尝试一下，首先用右下角的鼠标放大，然后用右上角的鼠标缩小。这会产生仅在画布左上角的图像。

我的猜测是将1000 更改为与图像或画布宽度和高度相关的内容。

感谢您的帮助。

最小代码示例：

canvas=new fabric.Canvas("mycanvas")
fabric.Image.fromURL("https://images.unsplash.com/photo-1488330890490-c291ecf62571?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80", function(img) {
         // add background image
         canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
            scaleX: canvas.width / img.width,
            scaleY: canvas.height / img.height
         });
      });
      
canvas.on('mouse:wheel', function(opt) {
var delta = opt.e.deltaY;
var zoom = canvas.getZoom();
zoom = zoom + delta/200;
if (zoom > 20) zoom = 20;
if (zoom < 1) zoom = 1;
canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
opt.e.preventDefault();
opt.e.stopPropagation();
var vpt = this.viewportTransform;
if (zoom < 400 / 1000) {
  this.viewportTransform[4] = 200 - 1000 * zoom / 2;
  this.viewportTransform[5] = 200 - 1000 * zoom / 2;
} else {
  if (vpt[4] >= 0) {
    this.viewportTransform[4] = 0;
  } else if (vpt[4] < canvas.getWidth() - 1000 * zoom) {
    this.viewportTransform[4] = canvas.getWidth() - 1000 * zoom;
  }
  if (vpt[5] >= 0) {
    this.viewportTransform[5] = 0;
  } else if (vpt[5] < canvas.getHeight() - 1000 * zoom) {
    this.viewportTransform[5] = canvas.getHeight() - 1000 * zoom;
  }
}});

#mycanvas{
  border: black solid 1px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.1.0/fabric.min.js"></script>
<canvas width="500px" height="300px" id="mycanvas"></canvas>

Answer 1

诀窍是检查视口何时超出边界并修复它。

将通用 1000 更改为当前缩放下的图像大小，以使其正常工作。

canvas=new fabric.Canvas("mycanvas")
var imgWidth, imgHeight
fabric.Image.fromURL("https://images.unsplash.com/photo-1488330890490-c291ecf62571?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80", function(img) {
         // add background image
         canvas.setBackgroundImage(img, function() {
         canvas.requestRenderAll();
         imgWidth = img.width * img.scaleX;
         imgHeight = img.height * img.scaleY;
         }, {
            scaleX: canvas.width / img.width,
            scaleY: canvas.height / img.height
         });
      });
      
canvas.on('mouse:wheel', function(opt) {
var delta = opt.e.deltaY;
var zoom = canvas.getZoom();
zoom = zoom + delta/200;
if (zoom > 20) zoom = 20;
if (zoom < 1) zoom = 1;
canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
opt.e.preventDefault();
opt.e.stopPropagation();
var vpt = this.viewportTransform;
if (vpt[4] >= 0) {
  this.viewportTransform[4] = 0;
} else if (vpt[4] < canvas.getWidth() - imgWidth * zoom) {
  this.viewportTransform[4] = canvas.getWidth() - imgWidth * zoom;
}
if (vpt[5] >= 0) {
  this.viewportTransform[5] = 0;
} else if (vpt[5] < canvas.getHeight() - imgHeight * zoom) {
  this.viewportTransform[5] = canvas.getHeight() - imgHeight * zoom;
}
});

#mycanvas{
  border: black solid 1px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.1.0/fabric.min.js"></script>
<canvas width="500px" height="300px" id="mycanvas"></canvas>