与正六边形的JavaScript点碰撞

时间：2016-11-23 23:47:08

标签： javascript html5 canvas collision-detection hexagonal-tiles

我正在制作一个基于HTML5画布六边形网格的系统，我需要能够在单击画布时检测网格中点击的六边形图块。

几个小时的搜索和尝试我自己的方法没有任何结果，从其他语言移植实现只会让我感到困惑，因为我的大脑很迟钝。

网格由平顶正六边形组成，如下图所示：

基本上，给定一个点和此图像中指定的变量作为网格中每个六边形的大小（R，W，S，H）：

我需要能够确定一个点是否在给定的六边形内。

示例函数调用将是pointInHexagon(hexX, hexY, R, W, S, H, pointX, pointY)，其中hexX和hexY是六边形图块边界框左上角的坐标（如上图中的左上角）。

有没有人知道如何做到这一点？目前，速度并不是一个令人担忧的问题。

5 个答案:

答案 0 :(得分：6)

简单＆amp;快速对角矩形切片。

看看其他答案，我看到他们有点过于复杂的问题。以下比接受的答案快一个数量级，并且不需要任何复杂的数据结构，迭代器，或生成死存储器和不需要的GC命中。它返回R，H，S或W的任何相关集合的十六进制单元格行和列。该示例使用R = 50.

部分问题是如果矩形是对角分割的，则找到一个矩形的哪一边。这是一个非常简单的计算，通过标准化要测试的点的位置来完成。

对角切割任何矩形

示例宽度为w的矩形，高度h从左上角到右下角分割。查找点是左还是右。假设矩形的左上角是rx，ry 

var x = ?;
var y = ?;
x = ((x - rx) % w) / w;
y = ((y - ry) % h) / h;
if (x > y) { 
    // point is in the upper right triangle
} else if (x < y) {
    // point is in lower left triangle
} else {
    // point is on the diagonal
}

如果你想改变对角线的方向，那么只需反转其中一个法线

x = 1 - x;  // invert x or y to change the direction the rectangle is split
if (x > y) { 
    // point is in the upper left triangle
} else if (x < y) {
    // point is in lower right triangle
} else {
    // point is on the diagonal
}

拆分为子细胞并使用％

问题的其余部分只是将网格分成（R / 2）个（H / 2）单元格宽度，每个六边形覆盖4列和2行。每3列中的第1列将具有对角线。这些柱的每一秒都有对角线翻转。对于每6个中的第4列，第5列和第6列，该行向下移动一个单元格。通过使用％，您可以非常快速地确定您所在的十六进制单元格。使用上面的对角分割方法可以使数学变得简单快捷。

还有一点。 return参数retPos是可选的。如果您按以下方式调用该功能

var retPos;
mainLoop(){
    retPos = getHex(mouse.x, mouse.y, retPos);
}

代码不会导致GC命中，进一步提高速度。

像素到十六进制坐标

从问题图表返回十六进制单元格x，y pos。请注意，此功能仅适用于0 <= x，0 <= y范围，如果您需要负坐标从输入中减去最小负像素x，y坐标

// the values as set out in the question image
var r = 50; 
var w = r * 2;
var h = Math.sqrt(3) * r;
// returns the hex grid x,y position in the object retPos.
// retPos is created if not supplied;
// argument x,y is pixel coordinate (for mouse or what ever you are looking to find)
function getHex (x, y, retPos){
    if(retPos === undefined){
        retPos = {};
    }
    var xa, ya, xpos, xx, yy, r2, h2;
    r2 = r / 2;
    h2 = h / 2;
    xx = Math.floor(x / r2);
    yy = Math.floor(y / h2);
    xpos = Math.floor(xx / 3);
    xx %= 6;
    if (xx % 3 === 0) {      // column with diagonals
        xa = (x % r2) / r2;  // to find the diagonals
        ya = (y % h2) / h2;
        if (yy % 2===0) {
            ya = 1 - ya;
        }
        if (xx === 3) {
            xa = 1 - xa;
        }
        if (xa > ya) {
            retPos.x = xpos + (xx === 3 ? -1 : 0);
            retPos.y = Math.floor(yy / 2);
            return retPos;
        }
        retPos.x = xpos + (xx === 0 ? -1 : 0);
        retPos.y = Math.floor((yy + 1) / 2);
        return retPos;
    }
    if (xx < 3) {
        retPos.x = xpos + (xx === 3 ? -1 : 0);
        retPos.y = Math.floor(yy / 2);
        return retPos;
    }
    retPos.x = xpos + (xx === 0 ? -1 : 0);
    retPos.y = Math.floor((yy + 1) / 2);
    return retPos;
}

十六进制到像素

一个辅助函数，它根据单元格坐标绘制一个单元格。 

// Helper function draws a cell at hex coordinates cellx,celly
// fStyle is fill style
// sStyle is strock style;
// fStyle and sStyle are optional. Fill or stroke will only be made if style given
function drawCell1(cellPos, fStyle, sStyle){    
    var cell = [1,0, 3,0, 4,1, 3,2, 1,2, 0,1];
    var r2 = r / 2;
    var h2 = h / 2;
    function drawCell(x, y){
        var i = 0;
        ctx.beginPath();
        ctx.moveTo((x + cell[i++]) * r2, (y + cell[i++]) * h2)
        while (i < cell.length) {
            ctx.lineTo((x + cell[i++]) * r2, (y + cell[i++]) * h2)
        }
        ctx.closePath();
    }
    ctx.lineWidth = 2;
    var cx = Math.floor(cellPos.x * 3);
    var cy = Math.floor(cellPos.y * 2);
    if(cellPos.x  % 2 === 1){
        cy -= 1;
    }
    drawCell(cx, cy);
    if (fStyle !== undefined && fStyle !== null){  // fill hex is fStyle given
        ctx.fillStyle = fStyle
        ctx.fill();
    }
    if (sStyle !== undefined ){  // stroke hex is fStyle given
        ctx.strokeStyle = sStyle
        ctx.stroke();
    }
}

答案 1 :(得分：4)

我认为你需要这样的东西〜

<强> EDITED 我做了一些数学，在这里你有它。这不是一个完美的版本，但可能会帮助你...

啊，您只需要一个R参数，因为根据它，您可以计算H，W和S。这就是我从你的描述中理解的。

＆＃13;
＆＃13; 
// setup canvas for demo
var canvas = document.getElementById('canvas');
canvas.width = 300;
canvas.height = 275;
var context = canvas.getContext('2d');
var hexPath;
var hex = {
  x: 50,
  y: 50,
  R: 100
}

// Place holders for mouse x,y position
var mouseX = 0;
var mouseY = 0;

// Test for collision between an object and a point
function pointInHexagon(target, pointX, pointY) {
  var side = Math.sqrt(target.R*target.R*3/4);
  
  var startX = target.x
  var baseX = startX + target.R / 2;
  var endX = target.x + 2 * target.R;
  var startY = target.y;
  var baseY = startY + side; 
  var endY = startY + 2 * side;
  var square = {
    x: startX,
    y: startY,
    side: 2*side
  }

  hexPath = new Path2D();
  hexPath.lineTo(baseX, startY);
  hexPath.lineTo(baseX + target.R, startY);
  hexPath.lineTo(endX, baseY);
  hexPath.lineTo(baseX + target.R, endY);
  hexPath.lineTo(baseX, endY);
  hexPath.lineTo(startX, baseY);

  if (pointX >= square.x && pointX <= (square.x + square.side) && pointY >= square.y && pointY <= (square.y + square.side)) {
    var auxX = (pointX < target.R / 2) ? pointX : (pointX > target.R * 3 / 2) ? pointX - target.R * 3 / 2 : target.R / 2;
    var auxY = (pointY <= square.side / 2) ? pointY : pointY - square.side / 2;
    var dPointX = auxX * auxX;
    var dPointY = auxY * auxY;
    var hypo = Math.sqrt(dPointX + dPointY);
    var cos = pointX / hypo;

    if (pointX < (target.x + target.R / 2)) {
      if (pointY <= (target.y + square.side / 2)) {
        if (pointX < (target.x + (target.R / 2 * cos))) return false;
      }
      if (pointY > (target.y + square.side / 2)) {
        if (pointX < (target.x + (target.R / 2 * cos))) return false;
      }
    }

    if (pointX > (target.x + target.R * 3 / 2)) {
      if (pointY <= (target.y + square.side / 2)) {
        if (pointX < (target.x + square.side - (target.R / 2 * cos))) return false;
      }
      if (pointY > (target.y + square.side / 2)) {
        if (pointX < (target.x + square.side - (target.R / 2 * cos))) return false;
      }
    }
    return true;
  }
  return false;
}

// Loop
setInterval(onTimerTick, 33);

// Render Loop
function onTimerTick() {
  // Clear the canvas
  canvas.width = canvas.width;

  // see if a collision happened
  var collision = pointInHexagon(hex, mouseX, mouseY);

  // render out text
  context.fillStyle = "Blue";
  context.font = "18px sans-serif";
  context.fillText("Collision: " + collision + " | Mouse (" + mouseX + ", " + mouseY + ")", 10, 20);

  // render out square    
  context.fillStyle = collision ? "red" : "green";
  context.fill(hexPath);
}

// Update mouse position
canvas.onmousemove = function(e) {
  mouseX = e.offsetX;
  mouseY = e.offsetY;
}
＆＃13; 
#canvas {
  border: 1px solid black;
}
＆＃13; 
<canvas id="canvas"></canvas>
＆＃13;
＆＃13;
＆＃13;

只需将pointInHexagon(hexX, hexY, R, W, S, H, pointX, pointY)替换为var hover = ctx.isPointInPath(hexPath, x, y)。

＆＃13;
＆＃13; 
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var hexPath = new Path2D();
hexPath.lineTo(25, 0);
hexPath.lineTo(75, 0);
hexPath.lineTo(100, 43);
hexPath.lineTo(75, 86);
hexPath.lineTo(25, 86);
hexPath.lineTo(0, 43);


function draw(hover) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = hover ? 'blue' : 'red';
  ctx.fill(hexPath);
}

canvas.onmousemove = function(e) {
  var x = e.clientX - canvas.offsetLeft, y = e.clientY - canvas.offsetTop;
  var hover = ctx.isPointInPath(hexPath, x, y)
  draw(hover)
};
draw();
＆＃13; 
<canvas id="canvas"></canvas>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：3)

我为你做了一个解决方案，证明了解决这个问题的三角形方法。

http://codepen.io/spinvector/pen/gLROEp

下面的数学：

isPointInside(point)
{
    // Point in triangle algorithm from http://totologic.blogspot.com.au/2014/01/accurate-point-in-triangle-test.html
    function pointInTriangle(x1, y1, x2, y2, x3, y3, x, y)
    {
        var denominator = ((y2 - y3)*(x1 - x3) + (x3 - x2)*(y1 - y3));
        var a = ((y2 - y3)*(x - x3) + (x3 - x2)*(y - y3)) / denominator;
        var b = ((y3 - y1)*(x - x3) + (x1 - x3)*(y - y3)) / denominator;
        var c = 1 - a - b;

        return 0 <= a && a <= 1 && 0 <= b && b <= 1 && 0 <= c && c <= 1;
    }

    // A Hex is composite of 6 trianges, lets do a point in triangle test for each one.
    // Step through our triangles
    for (var i = 0; i < 6; i++) {
        // check for point inside, if so, return true for this function;
        if(pointInTriangle( this.origin.x, this.origin.y,
                            this.points[i].x, this.points[i].y,
                            this.points[(i+1)%6].x, this.points[(i+1)%6].y,
                            point.x, point.y))
            return true;
    }
    // Point must be outside.
    return false;
}

答案 3 :(得分：3)

这是您问题的完全数学和功能表示。您会注意到除了三元组之外，此代码中没有if和then s来根据鼠标位置更改文本的颜色。事实上，这整个工作只不过是一行纯粹的简单数学; 

(r+m)/2 + Math.cos(a*s)*(r-m)/2;

此代码可重复使用从三角形到圆形的所有多边形。如果有兴趣请继续阅读。这很简单。

为了显示功能，我必须开发一个模拟问题的模型。我通过一个简单的实用函数在画布上绘制一个多边形。这样整个解决方案应适用于任何多边形。以下代码段将使用画布上下文c，半径r，边数s以及画布cx和cy中的本地中心坐标作为参数并在给定的画布上下文中在正确的位置绘制一个多边形。

function drawPolgon(c, r, s, cx, cy){ //context, radius, sides, center x, center y
  c.beginPath();
  c.moveTo(cx + r,cy);
  for(var p = 1; p < s; p++) c.lineTo(cx + r*Math.cos(p*2*Math.PI/s), cy + r*Math.sin(p*2*Math.PI/s));
  c.closePath();
  c.stroke();
}

我们还有一些其他实用功能，人们可以很容易地理解它们究竟在做什么。然而，最重要的部分是检查鼠标是否漂浮在我们的多边形上。它由效用函数isMouseIn完成。它基本上计算了鼠标位置到多边形中心的距离和角度。然后，将其与多边形的边界进行比较。多边形的边界可以用简单的三角函数表示，就像我们计算drawPolygon函数中的顶点一样。

我们可以将多边形看作一个在边数的频率上具有振荡半径的圆。振荡的峰值位于给定的半径值r（碰巧位于角度为2π/s的顶点，其中s是边数）和最小值{{ 1}}是m（每个都以角度r*Math.cos(Math.PI/s)显示）。我很确定表达多边形的理想方式可以通过傅里叶变换来完成，但我们在这里并不需要。我们所需要的是一个恒定半径分量，它是最小值和最大值2π/s + 2π/2s = 3π/s的平均值，以及具有边数(r+m)/2和振幅值最大值 - 最小值）/ 2的振荡分量顶部，s。当然，根据傅立叶声明，我们可能会继续使用较小的振荡组件，但是如果使用六角形，您可能不需要进一步迭代，而您可能会使用三角形。所以这是数学中的多边形表示。

Math.cos(a*s)*(r-m)/2

现在我们只需要计算鼠标位置相对于多边形中心的角度和距离，并将其与上面表示多边形的数学表达式进行比较。所以我们的魔法功能一起精心安排如下; 

(r+m)/2 + Math.cos(a*s)*(r-m)/2;

因此，以下代码演示了如何解决问题。

＆＃13;
＆＃13; 
function isMouseIn(r,s,cx,cy,mx,my){
  var m = r*Math.cos(Math.PI/s),   // the min dist from an edge to the center
      d = Math.hypot(mx-cx,my-cy), // the mouse's distance to the center of the polygon
      a = Math.atan2(cy-my,mx-cx); // angle of the mouse pointer
  return d <= (r+m)/2 + Math.cos(a*s)*(r-m)/2;
}
＆＃13; 
// Generic function to draw a polygon on the canvas

function drawPolgon(c, r, s, cx, cy){ //context, radius, sides, center x, center y
  c.beginPath();
  c.moveTo(cx + r,cy);
  for(var p = 1; p < s; p++) c.lineTo(cx + r*Math.cos(p*2*Math.PI/s), cy + r*Math.sin(p*2*Math.PI/s));
  c.closePath();
  c.stroke();
}

// To write the mouse position in canvas local coordinates

function writeText(c,x,y,msg,col){
  c.clearRect(0, 0, 300, 30);
  c.font = "10pt Monospace";
  c.fillStyle = col;
  c.fillText(msg, x, y);
}

// Getting the mouse position and coverting into canvas local coordinates

function getMousePos(c, e) {
  var rect = c.getBoundingClientRect();
  return { x: e.clientX - rect.left,
           y: e.clientY - rect.top
         };
}

// To check if mouse is inside the polygone

function isMouseIn(r,s,cx,cy,mx,my){
  var m = r*Math.cos(Math.PI/s),
      d = Math.hypot(mx-cx,my-cy),
      a = Math.atan2(cy-my,mx-cx);
  return d <= (r+m)/2 + Math.cos(a*s)*(r-m)/2;
}

// the event listener callback

function mouseMoveCB(e){
  var mp = getMousePos(cnv, e),
     msg = 'Mouse at: ' + mp.x + ',' + mp.y,
     col = "black",
  inside = isMouseIn(radius,sides,center[0],center[1],mp.x,mp.y);
  writeText(ctx, 10, 25, msg, inside ? "turquoise" : "red");
}

// body of the JS code

var cnv = document.getElementById("myCanvas"),
    ctx = cnv.getContext("2d"),
  sides = 6,
 radius = 100,
 center = [150,150];
cnv.addEventListener('mousemove', mouseMoveCB, false);
drawPolgon(ctx, radius, sides, center[0], center[1]);
＆＃13; 
#myCanvas { background: #eee;
                 width: 300px;
                height: 300px;
                border: 1px #ccc solid
          }
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：2)

在redblog处，有关于数学和工作示例的完整说明。

主要思想是六边形水平间隔$ 3/4 $的六边形大小，垂直方向只需$ H $，但需要考虑垂直偏移。红色的情况通过在1/4 W切片处比较x和y来确定。

相关问题
最新问题