Canvas 样式的滚动问题。left/top

Question

我正在为 canvas 应用程序制作放大镜，但我运行遇到了滚动问题。本质上，目标是拍摄 canvas 并在添加图像时（在本例中为 cgm 图像）并为其制作快照，将其放大并将其绘制到第二个更小的 canvas覆盖它并跟随鼠标（最好是 drag/mousedown 及以上，但我正在使用 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>

这里有一个fiddle供参考（我固定了高度来显示滚动问题）。

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; 顶部 canvas 阻止事件到达底部 canvas。

此外，您不必在每个函数上都声明 document.getElementById("..，那些应该是全局常量

长canvas的问题我们需要在计算中使用canvas.getBoundingClientRect来得到鼠标在canvas

中的真实位置

Canvas 样式的滚动问题。left/top

Scrolling issue with Canvas style.left/top

html

javascript

html5-canvas