javascript - 当浏览器窗口缩小/移动时 Canvas 点击事件搞砸了

Question

我一直在尝试在 HTML5 Canvas 中创建一个六边形网格。我有一个基本的网格，如果你点击一个十六进制它会突出显示十六进制(此处演示:http://cfiresim.com/hex-map-game-reboot/test.html)

在 javascript 中，我这样定义 Canvas (为简洁起见省略了一些部分):

 var hex = {};
 hex.canvas = document.getElementById("HexCanvas");
 hex.ctx = null;
 console.log("Initializing new game...");
 this.radius = 20;
 this.side = Math.round((3 / 2) * this.radius);
 this.height = Math.round(Math.sqrt(3) * this.radius);
 this.width = Math.round(2 * this.radius);

 //Set Size of main div to size of canvas
 $('#primary-panel').css('height', (hex.height * hex.rows)+hex.height*2);
 hex.canvas.style.width='100%';
 hex.canvas.style.height='100%';
 hex.canvas.width  = hex.canvas.offsetWidth;
 hex.canvas.height = hex.canvas.offsetHeight;

 //Set click eventlistener for canvas
 this.canvas.addEventListener("mousedown", this.clickEvent.bind(this), false);

 this.ctx = this.canvas.getContext('2d');

所有代码都可以在这里找到:https://github.com/boknows/hex-map-game-reboot

我的主要问题是:当通过浏览器调整 Canvas 大小时，是否有一种特定的方法可以防止点击事件变得异常？例如，如果您将浏览器缩小到刚好比网格大，则点击不会在正确的位置注册。我是否缺少 Canvas 的某些功能？也许 getSelectedTile() 没有被正确定义？

编辑:这似乎主要发生在浏览器滚动一点，从而将网格移出屏幕时。点击然后注册一个奇怪的偏移量，我猜它等于屏幕滚动的距离。有什么建议吗？

Answer 1

您必须进入页面滚动的位置。

在HexagonGrid.js ，而不是这个:

hex.clickEvent = function(e) {
        var mouseX = e.pageX;
        var mouseY = e.pageY;

这样做:

hex.clickEvent = function(e) {
        var mouseX = e.pageX - window.pageXOffset;
        var mouseY = e.pageY - window.pageYOffset;