Fabricjs画布在缩放后重置

Question

我有一个fabricjs画布,我需要能够放大和缩小,并且还可以多次更改图像/对象.

为此我在第一次加载页面时设置了画布,如下所示:

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.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.zoomToPoint,根据这个线程,在此之后,当我重置缩放时图像/对象开始改变位置或者在缩放时用鼠标单击画布,似乎跳到左上角的每个变化方向,最终从视野中消失.

重置缩放:

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

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

我尝试进行初始设置而不是重置并接合到视觉上工作,但实际上在每个新设置中添加了一个新的上部画布层,所以它没有用.

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

Answer 1

尽管这个问题很老，但是这是我使用当前版本的fabric.js 2.2.4所做的事情：

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

供您参考：缩放到某个点是对视口变换的重新计算。上面的矩阵是初始视口变换矩阵。

Answer 2

我最终解决了我遇到的问题。

canvas.setZoom(1)要重置缩放，我不是仅使用 来将缩放设置为 1 ，canvas.zoomToPoint 而是将该方法重新应用到同一点，但使用缩放 1，以强制初始缩放，但涉及用于放大的同一点。

至于恢复画布中图像位置的问题（例如平移后），很简单，只需删除图像，将其置于画布中央，然后将其重新添加到画布中，就像第一次添加时所做的那样：

  var img = canvas.getActiveObject();
  canvas.remove(img);
  canvas.centerObject(img);
  canvas.setActiveObject(img);
  canvas.add(img);

  canvas.renderAll();