Hice un pequeño proyecto en Fabri.js. En este proyecto, el usuario puede cargar una imagen en el lienzo y comenzar a acercar y alejar el zoom con la rueda del mouse rotada por el usuario. El alejamiento máximo es 1. Si el usuario alcanza el punto de alejamiento máximo, que es 1, la imagen vuelve a su posición original. Pero me enfrento al problema de que si el usuario puede acercar en un punto y luego alejar en algún otro punto del lienzo, la imagen llega a la posición original pero llega allí con una sacudida al final. Necesito una transición suave para que la imagen alcance su posición original sin ningún tirón.

Este es el código completo:

 const canvas = new fabric.Canvas("canvas",{ width:700, height:450, backgroundColor:"grey" // selection:false }); var zoom=0; canvas.on('mouse:wheel', function(opt) { var delta = opt.e.deltaY; // console.log(delta) zoom = canvas.getZoom(); // console.log(zoom) zoom *= 0.999 ** delta; if (zoom > 40) zoom = 40; if (zoom < 1) zoom = 1; canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom); opt.e.preventDefault(); opt.e.stopPropagation(); //image back to its origanal position var vpt = this.viewportTransform; if (zoom === 1) { vpt[4] = 0; vpt[5] = 0; } }); canvas.renderAll(); //get image from user var upload_image=""; const image = document.querySelector("#image"); image.addEventListener("change",()=>{ const reader = new FileReader(); // console.log(reader) reader.addEventListener("load",()=>{ upload_image=reader.result; }) reader.readAsDataURL(image.files[0]); }); //set image on the canvas const setImage =() =>{ fabric.Image.fromURL(upload_image,(img)=>{ canvas.backgroundImage=img; canvas.viewportCenterObject(img); canvas.renderAll(); }); }