Ich habe ein fabricjs canvas, die ich zum Vergrößern und Verkleinern sowie zum mehrmaligen Ändern des Bilds / Objekts verwenden muss.

Dafür richte ich den Canvas beim ersten Laden der Seite so ein:

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

Wenn ich das Bild / Objekt im Canvas ändern muss oder wenn die Seite neu geladen wird, versuche ich, den Canvas wie folgt zurückzusetzen:

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

Nicht sicher, ob es wichtig ist, aber die Art und Weise, wie ich das Bild ändere, besteht darin, die Quelle in 'my_image' zu ändern und die Zeichenfläche mit der oben beschriebenen Methode zurückzusetzen.

Das funktioniert gut, bis ich @ benutcanvas.zoomToPoint, gemäßDie thread, danach beginnt das Bild / Objekt seine Position zu ändern, wenn ich den Zoom zurücksetze oder mit der Maus auf die Leinwand klicke, während es gezoomt wird. Es scheint, als springe ich bei jeder Änderung in die Richtung der oberen linken Ecke und verschwinde schließlich aus der Ansicht.

Reset Zoom:

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

Wie kann ich die Bild- / Objektposition wiederherstellen?

Ich habe versucht, das anfängliche Setup anstelle des Zurücksetzens durchzuführen, und es wurde gesäumt, um visuell zu funktionieren. Tatsächlich fügte ich bei jedem neuen Setup eine neue Ebene der oberen Leinwand hinzu, sodass es nicht gut ist.

Gibt es eine Möglichkeit, die Zeichenfläche in den ursprünglichen Zustand zurückzusetzen, ohne dieses Verhalten zu verursachen, und trotzdem richtig hinein- / herauszuzoomen?