Vergrößern und Verkleinern: Leinwand

Question

Offset Ich bin auf einem Zoom functionnality wie folgt arbeiten:

public wheelEventHandler(ev) { 
     var pointer = this.canvas.getPointer(ev.e); 
     var posx = pointer.x; 
     var posy = pointer.y; 
     if (ev.wheelDelta > 0) { 
      //zoom in 
      let valeurZoom = this.canvas.getZoom() * 1.1 <= this.maxZoom ? this.canvas.getZoom() * 1.1 : this.maxZoom; 
      this.canvas.zoomToPoint(new fabric.Point(posx, posy), valeurZoom); 
     } 
     else { 
      //zoom out 
      let valeurZoom = this.canvas.getZoom()/1.1 >= 1 ? this.canvas.getZoom()/1.1 : 1; 
      this.canvas.zoomToPoint(new fabric.Point(posx, posy), valeurZoom); 
     } 
    } 

Problem ist, wenn ich die Ansicht vergrößern, und dann verkleinern, die erste Ansicht einen Offset und i don Ich weiß nicht, was zu tun ist, wenn mein Zoom wieder auf 1 steht, möchte ich, dass die Leinwand genau das zeigt, was sie vorher gezeigt hat, mit zentriertem Bild und ohne Offset.

Wie kann ich tun?

das ist, was ich in der begening haben und was ich will, wenn Zoom 1

ist wieder das ist, was ich habe, wenn ich wieder auf 1 zoomen und ich will nicht den Offset in rot

Answer 1

Lempkin,

Wenn Sie zum ursprünglichen Zoom verkleinern (1) versuchen, diese Funktionalität nutzen:

var centerOfCanvas = new fabric.Point(canvas.getWidth()/2, canvas.getHeight()/2); 
    canvas.zoomToPoint(centerOfCanvas , 1); 
    canvas.renderAll(); 

Wenn Sie auf einem Zentrum der Zeit all diese Logik verwenden, um verkleinern:

var centerOfCanvas = new fabric.Point(canvas.getWidth()/2, canvas.getHeight()/2); 
    canvas.zoomToPoint(centerOfCanvas , canvas.getZoom()/1.1); 
    canvas.renderAll(); 

Wenn Sie/in der Mausposition Ihre Logik verwenden vergrößern Zum Vergrößern wollen, aber wenn Sie sind gleich 1 Vergrößern Zurücksetzen auf die mittlere Position der Maus.

Reset to default:

canvas.viewportTransform = [1,0,0,1,0,0]