HTML-5 畫布放大鏡無法鼠標向下/拖動和滾動干擾圖像

Question

我正在為 Canvas 應用程序創建一個放大鏡，該應用程序應該拍攝畫布圖像快照並將其繪制到光標坐標所在的較大比例的較小畫布上，但我遇到了 2 個問題。

1. 當我向下滾動時，包含縮放的畫布/圖像的畫布不再顯示其上方，而是顯示畫布/圖像的頂部。
2. 我無法設置單擊事件，用戶可以按住鼠標左鍵並移動縮放區域直到 mouseup。 我嘗試了鼠標按下和鼠標按下事件偵聽器無濟於事，因此作為參考，我將它放在 mousemove 和 mouseleave 上，它也不能很好地工作，但需要用 mouseup 代替。

 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>

這是一個供參考的小提琴（我修復了顯示滾動問題的高度）。

JSFiddle

Answer 1

我將重點介紹以下部分：

制作畫布圖像快照並將其繪制到較小的畫布上
在光標坐標所在的較大范圍內

您的代碼對樣式做了很多事情，我不知道為什么，您的評論沒有給我任何說明為什么需要這樣做，所以我刪除了所有這些以使這個示例盡可能簡單

我們需要繪圖，所以我們將使用您擁有的drawing = new Image() ，我們需要與 click 進行一些集成我添加了一個新變量drawing = new Image()點擊畫布將暫停縮放移動，再次點擊將恢復它，對我來說這是直觀的方式

請參閱下面的示例代碼

 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>