Canvas style.left/top 的滾動問題

Question

我正在為畫布應用程序制作放大鏡，但我遇到了滾動問題。 本質上，目標是獲取一個畫布，並在添加圖像（在本例中為 cgm 圖像）並對其進行快照，將其放大並將其繪制到覆蓋它並跟隨鼠標的第二個較小的畫布上（最好拖動/鼠標向下和向上，但我使用 mousemove 進行測試）。 我相信問題出在我的主要應用程序的 zoom.style.top 和 zoom.style.left 注意我的上邊距為 70px 所以請記住這一點。

這是我寫的一個簡單的例子

<!-- language: lang-js -->

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, e.x, e.y, 200, 200, 0, 0, 300, 300);
    zoom.style.top = e.pageY - 70 + "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

我在你的 JSFiddle 上簡化了很多代碼。

看看這是否是您正在尋找的行為：

 const canvas = document.getElementById("canvas1"); const ctx = canvas.getContext("2d"); const zoom = document.getElementById("tCanvas"); const zoomCtx = zoom.getContext('2d'); for (let i = 10; i < 20; i++) for (let j = -60; j < 800; j += 60) ctx.fillText(j + i, i * 20 - 180, i * 9 + j); function getMousePos(evt) { var rect = canvas.getBoundingClientRect() return { x: evt.clientX - rect.left, y: evt.clientY - rect.top } } canvas.addEventListener("mousemove", function(e) { zoomCtx.clearRect(0, 0, zoom.width, zoom.height); let pos = getMousePos(e) zoomCtx.drawImage(canvas, pos.x, pos.y, 200, 200, 0, 0, 300, 300); zoom.style.top = e.pageY - 10 + "px" zoom.style.left = e.pageX - 10 + "px" zoom.style.display = "block"; }); canvas.addEventListener("mouseleave", function() { zoom.style.display = "none"; });

 #tCanvas { border: 1px solid red; display: none; position: absolute; background-color: #808080; pointer-events: none; } #canvas1 { background-color: #808080; }

 <canvas id="tCanvas" width=100 height=100></canvas> <canvas id="canvas1" width=240 height=800></canvas>

我認為您的問題與pointer-events: none; 頂部畫布阻止事件到達底部畫布。

此外，您不必在每個函數上聲明您的document.getElementById(".. ，這些應該是全局常量

對於長畫布的問題，我們需要在計算中使用canvas.getBoundingClientRect來獲取鼠標在畫布中的真實位置