时间戳

首页 > 解决方案 > 通过 CSS 调整大小时画布鼠标事件延迟

javascript - 通过 CSS 调整大小时画布鼠标事件延迟

问题描述

我正在玩一个项目以了解有关 node.js 和 html 画布的更多信息。

在我的项目中，我有一个画布，我想保持固定的位图大小，但在保持其纵横比的同时填充其包含的 div。

我已将 500x500 的大小应用于我的画布元素，然后在 CSS 中应用以下样式。

canvas {
  display: block;
  width:100%;
  height:100%;
  object-fit: contain;
  background-color: lightgrey;
}

在 javascript 内部，最初将画布填充为白色，所以我得到如下所示的内容，到目前为止一切都很好。

在此处输入图像描述

我挂钩鼠标事件并使用它们来绘制线条。我使用以下函数将事件正确缩放到画布。

function  getMousePos(evt) {
  var rect = canvas.getBoundingClientRect(); // abs. size of element

  var raw_x = evt.clientX||evt.touches[0].clientX;
  var raw_y = evt.clientY||evt.touches[0].clientY;

  var min_dimension = Math.min(rect.width,rect.height);
  var x_offset = 0.5*(rect.width-min_dimension);
  var y_offset = 0.5*(rect.height-min_dimension);

  return {
    x: ((raw_x - rect.left - x_offset) / min_dimension) * canvas.width,
    y: ((raw_y - rect.top - y_offset) / min_dimension) * canvas.height
  }
}

这可行，但是当鼠标移到图像右侧的带上时在画布上绘图时，它不会更新，直到鼠标离开带为止。乐队与画布左侧的空间大小相同，所以我认为它是相关的，但我不知道如何调查。如果我调整窗口大小直到画布位图的两侧都没有空间（并且性能要快得多），我没有任何问题。下面的 gif 应该让事情更清楚。

在此处输入图像描述

有没有人对可能导致这种情况的原因提出建议，或者有更好的方法让我达到同样的效果。

注意：我正在运行 chrome 版本 80.0.3987.149

标签： javascriptcsshtml5-canvas

解决方案

对于遇到此问题的其他人，除了在窗口调整大小事件发生时使用 JavaScript 调整元素大小之外，我找不到一个好的解决方案。

推荐阅读