Necesito acercar la ubicación del puntero y la ubicación máxima de alejamiento se establecería en 1. La imagen se carga en el lienzo desde el sistema local. A continuación se muestra mi fragmento de código js:
var canvas = new fabric.Canvas('canvas'); document.getElementById("uploader").onchange = function(e) { var reader = new FileReader(); reader.onload = function(e) { var image = new Image(); image.src = e.target.result; image.onload = function() { var img = new fabric.Image(image); img.set({ left: 100, top: 60 }); img.scaleToWidth(1125); canvas.add(img).setActiveObject(img).renderAll(); } } reader.readAsDataURL(e.target.files[0]); } canvas.on('mouse:wheel', function(opt) { var delta = opt.e.deltaY; var zoom = canvas.getZoom(); zoom *= 0.999 ** delta; if (zoom > 20) zoom = 20; if (zoom < 0.01) zoom = 0.01; //canvas.setZoom(zoom); const center = canvas.getCenter(); const centerPoint = new fabric.Point(center.left , center.right); canvas.setZoom(zoom); opt.e.preventDefault(); opt.e.stopPropagation(); })archivo HTML:
<canvas id="canvas" width="1500" height="844" style="border:1px solid black"></canvas>Para establecer el alejamiento máximo, cambie esto if (zoom < 0.01) zoom = 0.01; a si (zoom < 1) zoom = 1;
necesitas usar este código
canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);en vez de
const center = canvas.getCenter(); const centerPoint = new fabric.Point(center.left , center.right); canvas.setZoom(zoom);