在响应式页面上绘制点击是错误的

Question

我构建了一个简单的跟踪器，记录了.html页面上每次点击的X和Y，然后是一个绘制效果很好的点击的功能，问题是当我调整屏幕然后很好......一切都搞砸了当然。 我想知道是否有人对如何做到这一点有任何建议？ 我正在考虑用.resize实现一些东西：

$( window ).resize(function() {
    var r_width = $( window ).width();
});

要计算窗口的宽度，请使用它吗？任何想法或建议？有点卡住并试图继续前进。非常感谢!!

Answer 1

我假设您有一个代表浏览器窗口的画布。

首先，让我们澄清将窗口坐标（从点击）转换为画布坐标（绘图位置）的公式。这将是：

  

canvasX = windowX / windowWidth * canvasWidth;

     

canvasY = windowY / windowHeight * canvasHeight;

因此，如果您的窗口更改大小（windowWidth＆amp; windowHeigth已更改），您有两个选择：

1。）按照窗口大小的变化

按比例更改画布的大小

• 在全局变量中捕获原始窗口大小。
• 在调整大小事件处理程序中，计算新旧变化百分比。
• 按此百分比更改画布大小。

2.。）缩放画布的内容

• 在全局变量中捕获原始窗口大小。
• 在调整大小事件处理程序中，计算新旧变化百分比。
• 将当前画布内容复制到图像或其他画布
• 清除画布
• 使用scale方法
将复制的内容绘制回画布