Tela de Fabricjs redefinida após o zoom

eu tenho umfabricjs tela que eu preciso ser capaz de aumentar e diminuir o zoom e também alterar a imagem / objeto várias vezes.

Para isso, configurei a tela na primeira vez que a página é carregada assim:

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

Então, quando preciso alterar a imagem / objeto na tela ou quando a página é recarregada, tento redefinir a tela da seguinte maneira:

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

Não tenho certeza se isso importa, mas a maneira como altero a imagem é alterando a fonte em 'my_image' e redefinindo a tela com o método acima.

Isso funciona bem até eu usarcanvas.zoomToPoint, conformeesta Depois disso, a imagem / objeto começa a mudar de posição quando redefino o zoom ou clico na tela com o mouse enquanto ele é ampliado, parecendo pular a cada alteração na direção do canto superior esquerdo, desaparecendo de vista.

Redefinir zoom:

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

Como posso restaurar a posição da imagem / objeto?

Tentei fazer a configuração inicial em vez da redefinição e costurei para trabalhar visualmente, mas na verdade estava adicionando uma nova camada de tela superior a cada nova configuração, para que não fosse bom.

Existe uma maneira de redefinir a tela para o estado original sem causar esse comportamento e ainda conseguir aumentar / diminuir o zoom corretamente?

questionAnswers(3)

yourAnswerToTheQuestion