HTML-5帆布放大镜无法鼠标向下/拖动和滚动干扰图像。

Question

我正在为一个画布应用程序创建一个放大镜，该应用程序应该获取一个画布图像快照，并在光标坐标所在的较小的画布上绘制它，但我遇到了两个问题。

1. 当我向下滚动时，包含放大的画布/图像的画布不再显示其结束，而是显示画布/图像的顶部。
2. 我无法设置一个点击事件，用户可以按住鼠标左键并移动缩放区域，直到鼠标向上移动。我试过鼠标向下和鼠标向上事件侦听器，但没有用，所以作为参考，我有它的摩丝表情和鼠标，这也不是很好的工作，但需要用鼠标代替。

​

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 - 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()，我们需要与单击集成--我添加了一个新变量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, e.x - 15, e.y - 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>

​