He implementado una función de zoom en mi lienzo. Estoy usando fabricjs para lienzo. En mi caso, se establece una imagen de fondo en el lienzo. Ahora, cuando acerco y alejo, todo el lienzo se acerca y se aleja sin ningún recorte y también el objeto seleccionado dentro de la imagen tampoco cambia su posición. Todo funciona bien, pero el problema es que se acerca y se aleja desde la parte superior izquierda. Sin embargo, quiero acercar y alejar desde el centro, no desde la esquina superior izquierda. He usado canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), zoom); pero esto no funcionó para mí. Tengo que usar setZoom() de lo contrario, la imagen se recorta.

El cuadro de rectángulo que se dibuja en la imagen también se mueve si no se usa setZoom y si se usa no puedo acercar y alejar desde el centro

este es el codigo

 handleZoomOnMouseEvent(e, canvas) { let zoom = canvas.getZoom(); zoom = parseFloat(zoom, 100) if (e.ctrlKey) { e.preventDefault() e.stopPropagation() let min = 0 const delta = e.deltaY; if (delta > 0) { zoom -= 0.01; if (this.min_zoom > 0.05) min = 0.05 else min = this.min_zoom if (zoom <= min) zoom = min; } else { zoom += 0.01; if (zoom >= 1.5) zoom = 1.5; } handleZoom(zoom) } }, handleZoom(zoom, e){ // var stroke = this.strokeWidth canvas.setDimensions({ width: canvas.backgroundImage.width * canvas.getZoom(), height: canvas.backgroundImage.height * canvas.getZoom() }); canvas.backgroundImage.rotate(0); canvas.viewportCenterObject(canvas.backgroundImage); canvas.renderAll(); canvas.setZoom(zoom); canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), zoom); // if (e !== undefined) { // const pointer = canvas.getPointer(e) // const posx = pointer.x // const posy = pointer.y // canvas.zoomToPoint(new fabric.Point(posx, posy), Math.min(Math.max(zoom + (e.deltaY/150), .5), .6)); // } else { // canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), zoom); // } canvas.setDimensions({ width: canvas.backgroundImage.width * canvas.getZoom(), height: canvas.backgroundImage.height * canvas.getZoom() }); canvas.renderAll(); },