Question

我一直在玩HTML5 Canvas中创建六边形网格。我有一个基本的网格，如果你单击一个十六进制它将突出显示十六进制（演示在这里：http://cfiresim.com/hex-map-game-reboot/test.html）

在javascript中，我正在定义画布（为简洁起见省略了一些部分）：

 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

我的主要问题是：当通过浏览器调整画布大小时，是否有一种特定方法可以防止点击事件变得棘手？例如，如果您将浏览器缩小到比网格大，则点击不要在正确的位置注册。我错过了帆布的一些功能吗？也许没有正确定义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;

浏览器窗口收缩/移动时，画布点击事件搞砸了

1 个答案: