触发 Mouseout 事件取决于窗口大小

Question

我想在经过 3D 转换的画布上绘图，但是 Chrome 中的 mouseout 事件出现了一些奇怪的问题。

当我将 JSFiddle 窗口大小设置为 2100 像素时，mouseout 事件会正常工作。

但是，当我将窗口大小设置为 1900px 时，鼠标事件大约在红线处触发。

这真的很奇怪，因为 JSFiddle 窗口大小决定了鼠标移出事件是否被正确触发。

直到这里，鼠标移出事件在 Firefox 和 Edge 中被正确触发，但在 Chrome 中无法正常工作！此外，我们在使用滚动位置（例如，通过添加一些 <br> 并且滚动会影响鼠标移出事件位置）、窗口大小（参见上图）或画布宽度（例如将画布宽度设置为 200 会正确触发鼠标移出事件）。

有没有人可以帮我解决这个错误，以便浏览器正确地触发 mouseout 事件而与窗口大小或滚动位置无关？

代码：JSFiddle

演示：YouTube

小提琴中的代码片段：

$(".dynamic-drawing-canvas").on("mouseout", function(e) {
  console.log(e.clientX, e.clientY)
})

#container {
  pointer-events: none;
  margin-left: 400px;
}

.dynamic-drawing-canvas {
  pointer-events: auto;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <canvas class="dynamic-drawing-canvas" width="1200" height="300" style="
    transform: matrix3d(1.0303, 0.00317459, 0, 2.13211e-05, -0.68458, -0.165542, 0, -0.00111181, 0, 0, 1, 0, -34.7412, 264.118, 0, 1);
    transform-origin: left top;
"></canvas>
</div>

Answer 1

您似乎遇到了画布容器的问题。

关于正在发生的事情的一些说明： 使用标记中的属性以 1200 像素和 300 像素的宽度/高度生成画布：width="1200" height="300" 您可以在<canvas> 标记中直接或使用 JavaScript 覆盖它。 为什么 CSS 调整大小有问题： CSS 所做的是将现有画布调整为新大小。当一个典型的/大多数 HTML 组件被调整大小时，浏览器可以很好地处理这个问题。区别在于<canvas> 是像素的集合。当您使用 CSS 进行更改时，这些像素会发生变化（拉伸或缩小），并且画布上的图像会呈现不同的外观。另请注意，空白画布也会被拉伸，因此对其进行绘图会遇到挑战，并且可能/无法按预期工作。

在这里，我在这些属性上使用 JavaScript 调整您的画布以适合容器，但实际上仅作为示例 - 您的大小会有所不同。

我添加了一些边框，以便您可以看到东西 - 我放置了一些日志以显示它发生变化的位置，mouseout 触发，因为它现在适合容器 - 我使用 1.1 对其进行缩放以适应并移动将样式添加到 CSS 中，这样我就可以从前到后添加 cmets。

console.clear();
let canvas = document.getElementById("c");

let width = canvas.width;
let height = canvas.height;
console.log("CW:", width, "CH:", height);
let rect = canvas.parentNode.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;

width = canvas.width;
height = canvas.height;
let r = canvas.getBoundingClientRect();
let ctop = r.top;
let cleft = r.left;
console.log("T:", ctop, "L:", cleft, "W:", width, "H:", height);
$(".dynamic-drawing-canvas")
  .on("mouseout", function(e) {
    // console.log(e.clientX, e.clientY);
    console.log("Screen X/Y:", e.screenX, e.screenY, "Client X/Y:", e.clientX, e.clientY);
    console.log("X:", e.screenX - e.clientX);
    console.log("Y:", e.screenY - e.clientY);
  });

#container {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 0px;
  width: 90%;
  height: 100%;
  border: solid red 3px;
}

.dynamic-drawing-canvas {
  pointer-events: auto;
  background-color: blue;
  object-fit: none;
  object-position: top left;
  transform-origin: left top;
  /* pulled out of markup, alter for 2.13211e-5 */
  /*
  transform: matrix3d(
  1.0303, 0.00317459, 0, 0.0000213211,
  -0.68458, -0.165542, 0, -0.00111181,
  0, 0, 1, 0,
  -34.7412, 264.118, 0, 1
  ); 
  THEN adjusted the 
      following transformations:
         0, 30, 0, 1.1
        Translates every X point by 0px
        Translates every Y point by 30px
        Translates every Z point by 0
        Scales down by 10%
*/
  transform: matrix3d(1.0303, 0.00317459, 0, 0.0000213211, 0.68458, 0.165542, 0, 0.00111181, 0, 0, 1, 0, 0, 30, 0, 1.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <canvas id="c" class="dynamic-drawing-canvas" width="1200" height="300"></canvas>
</div>