Estoy creando una lupa para una aplicación Canvas que se supone que debe tomar una instantánea de la imagen del lienzo y dibujarla en un lienzo más pequeño a mayor escala donde están las coordenadas del cursor, pero me he encontrado con 2 problemas.
var canvas = document.getElementById("canvas1"); var ctx = canvas.getContext("2d"); var ox = canvas.width / 2; var oy = canvas.height / 2; ctx.font = "42px serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = "blue"; ctx.fillRect(ox / 2, oy / 2, ox, oy); function magnify() { var main = document.getElementById("canvas1"); var ctx = main.getContext('2d') var base64 = main.toDataURL('image/png', 0); drawing = new Image(); drawing.onload = () => { var zoom = document.getElementById("tCanvas"); var zoomCtx = zoom.getContext('2d'); zoomCtx.drawImage(drawing, 0, 0); } main.addEventListener("mousemove", function(e) { var zoom = document.getElementById("tCanvas"); var zoomCtx = zoom.getContext('2d'); zoomCtx.clearRect(0, 0, zoom.width, zoom.height); zoomCtx.drawImage(main, ex, ey, 200, 200, 0, 0, 300, 300); zoom.style.top = e.pageY - 10 + "px" zoom.style.left = e.pageX - 10 + "px" e.pageY = -150 e.pageX = -150 zoom.style.display = "block"; }); main.addEventListener("mouseleave", function() { var zoom = document.getElementById("tCanvas"); zoom.style.display = "none"; }); drawing.src = base64; }; <canvas id="tCanvas" class="cgm" height="100" width="100" style="background-color:white; position: absolute; display: none; z- index:1;border:1px solid red;"> </canvas> <canvas tabindex=1 class="cgm" id="canvas1" style="position:relative; background:white; left:0;right:0;margin:auto;z-index:1;margin-top:70px; "></canvas> <p></p> <button id="zoom" onclick="magnify();">Zoom</button>Aquí hay un violín como referencia (arreglé la altura para mostrar el problema del desplazamiento).
Me voy a centrar en la parte:
haga una instantánea de la imagen del lienzo y dibújela en un lienzo más pequeño
a una escala mayor donde las coordenadas del cursor son
Su código estaba haciendo muchas cosas con los estilos y no tengo idea de por qué, sus comentarios no me dan ninguna indicación de por qué era necesario, así que eliminé todo eso para mantener este ejemplo lo más simple posible.
Necesitamos dibujar, así que usaremos ese drawing = new Image() que tiene y necesitamos alguna integración con clic Agregué una nueva variable drawing = new Image() al hacer clic en el lienzo se detendrá el movimiento de zoom, y al hacer clic nuevamente lo hará reanudarlo, esa para mí fue la forma intuitiva
Ver mi código de muestra a continuación
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var zoom = document.getElementById("zoom"); var zoomCtx = zoom.getContext('2d'); const z = zoom.width * 5 var pause = false ctx.fillStyle = "blue"; ctx.fillRect(5, 5, 5, 90); ctx.fillRect(60, 15, 20, 50); for (let i = 10; i < 19; i++) ctx.fillText(i, i * 2, i * 9 - 70); var drawing = new Image(); drawing.src = canvas.toDataURL('image/png', 0); canvas.addEventListener("mousemove", (e) => { if (pause) return zoomCtx.clearRect(0, 0, zoom.width, zoom.height); zoomCtx.drawImage(drawing, ex - 15, ey - 15, 50, 50, 0, 0, z, z); }); canvas.addEventListener("mousedown", (e) => { pause = !pause }); canvas { border: solid } <canvas id="canvas" height="100" width="100"></canvas> <canvas id="zoom" height="100" width="100"></canvas>