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

Question

我想在 3D 转换的 Canvas 上绘图，但在 Chrome 中的 mouseout 事件有一些奇怪的问题。
当我将 JSFiddle 窗口大小设置为 2100px 时，mouseout 事件作为异常(exception)工作。

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

这真的很奇怪，因为 JSFiddle 窗口大小决定了鼠标移出事件是否被正确触发。
在此之前，鼠标移出事件在 Firefox 和 Edge 中被正确触发，但在 Chrome 中无法正常工作!此外，我们在使用滚动位置(例如，通过添加一些 <br> 并且滚动会影响鼠标移出事件位置)、窗口大小(参见上图)或 Canvas 宽度(例如将 Canvas 宽度设置为 200 会正确触发鼠标移出事件)。
有没有人可以帮助我解决此错误，以便浏览器正确触发 mouseout 事件而与窗口大小或滚动位置无关？
代码:JSFiddle
演示:YouTube
fiddle 中的代码片段:

$(".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

看起来您遇到了 Canvas 容器的问题。
关于正在发生的事情的一些说明:
使用标记中的属性以 1200 像素和 300 像素的宽度/高度生成 Canvas :width="1200" height="300"您可以在 <canvas> 中覆盖它直接或使用 JavaScript 标记。
为什么 CSS 调整大小有问题: CSS 所做的是将现有 Canvas 调整为新大小。当一个典型的/大多数 HTML 组件被调整大小时，浏览器可以很好地处理这个问题。区别是<canvas>是像素的集合。当您使用 CSS 进行更改时，这些像素会发生变化(拉伸(stretch)或缩小)，并且 Canvas 上的图像会呈现不同的外观。另请注意，空白 Canvas 也被拉伸(stretch)，因此对其进行绘图具有挑战并且可能/无法按预期工作。
在这里，我在这些属性上使用 JavaScript 调整您的 Canvas 以适应容器，但实际上仅作为示例 - 您的大小会有所不同。
我添加了一些边框，以便您可以看到内容 - 我放置了一些日志以显示它的更改位置和 mouseout因为它现在适合容器内而触发 - 我使用 1.1 对其进行缩放以适合并将样式移到 CSS 中，这样我就可以从前到后添加评论。

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>