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

Prevent zoom outside background - fabric.js

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

但是当.zoomToPoint()与背景一起使用时,它可以不对齐并显示白色空白canvas。在我的 jsfiddle 或下方尝试一下,先用鼠标在右下角放大,然后用鼠标在右上角缩小。这会生成仅位于 canvas.

左上角的图像

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

感谢您的帮助。

最小代码示例:

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>

诀窍是检查视口何时越界并修复它。

使用当前缩放的图像大小更改通用 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>