javascript - 缩放后 Fabricjs Canvas 重置

Question

我有一个 fabricjs我需要能够放大和缩小并多次更改内部图像/对象的 Canvas 。

为此，我在第一次加载页面时设置 Canvas ，如下所示:

fabric.Object.prototype.hasBorders = false;
fabric.Object.prototype.hasControls = false;

canvas = new fabric.Canvas('my_canvas', {renderOnAddRemove: false, stateful: false});

canvas.defaultCursor = "pointer";
canvas.backgroundImageStretch = false;
canvas.selection = false;
canvas.clear();

var image =  document.getElementById('my_image');
if (image != null) {
  imageSrc = image.src;
  if(imageSrc.length > 0){
    fabric.Image.fromURL(imageSrc, function(img) {
      img = scaleImage(canvas, img); //shrinks the image to fit the canvas
      img.selectable = false;
      canvas.centerObject(img);
      canvas.setActiveObject(img);
      canvas.add(img);
    });
  }
}
canvas.deactivateAll().renderAll();

然后当我需要更改 Canvas 中的图像/对象或重新加载页面时，我尝试像这样重置 Canvas :

canvas.clear();
canvas.remove(canvas.getActiveObject());
var image =  document.getElementById('my_image');
if (image != null) {
  imageSrc = image.src;
  if(imageSrc.length > 0){
    fabric.Image.fromURL(imageSrc, function(img) {
      img = scaleImage(canvas, img); //shrinks the image to fit the canvas
      img.selectable = false;
      canvas.centerObject(img);
      canvas.setActiveObject(img);
      canvas.add(img);
    });
  }
}

不确定这是否重要，但我更改图像的方式是通过更改“my_image”中的源并使用上述方法重置 Canvas 。

在我根据 this 使用 canvas.zoomToPoint 之前，这一直很好用线程，在此之后，当我重置缩放或在缩放时用鼠标单击 Canvas 时，图像/对象开始改变位置，似乎在左上角方向的每次变化中跳跃，最终从 View 中消失。

重置缩放:

canvas.setZoom(1);
resetCanvas(); //(above method)

如何恢复图像/对象的位置？

我尝试进行初始设置而不是重置并缝合以在视觉上工作，但实际上是在每个新设置中添加一个新的上层 Canvas 层，所以这并不好。

有没有办法将 Canvas 重置为原始状态而不会导致此行为并且仍然能够正确放大/缩小？

Answer 1

虽然这个问题很老，但这是我使用当前版本的 fabric.js 2.2.4 所做的:

canvas.setViewportTransform([1,0,0,1,0,0]); 

供您引用:缩放到一个点是对视口(viewport)变换的重新计算。上面的矩阵是初始视口(viewport)变换矩阵。