Столкновение точек JavaScript с регулярным шестиугольником

Я думаю, вам нужно что-то вроде этого~

редактировать Я кое-что подсчитал, и вот оно. Это не идеальная версия, но, вероятно, поможет вам...

Ах, вам нужно только R параметр, потому что на его основе вы можете вычислить H, W и S. Вот что я понял из вашего описания.

// 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;
}

#canvas {
  border: 1px solid black;
}

<canvas id="canvas"></canvas>

просто заменить pointInHexagon(hexX, hexY, R, W, S, H, pointX, pointY) по var hover = ctx.isPointInPath(hexPath, x, y).

• это создание и копирование дорожек
• о Обнаружение Столкновений

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();

<canvas id="canvas"></canvas>

Я сделал для вас решение, которое демонстрирует точки в треугольнике подход к этой проблеме.

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;
}

вот полностью математическое и функциональное представление вашей проблемы. Вы заметите, что нет ifs и thens в этом коде, кроме троичного, чтобы изменить цвет текста в зависимости от положения мыши. Вся эта работа на самом деле не что иное, как чистая простая математика только одной строки;

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

и этот код многоразовый для всех полигонов от треугольника до круга. Поэтому, если интересно, пожалуйста, читайте дальше. Все очень просто.

In для отображения функциональности мне пришлось разработать имитационную модель проблемы. Я рисую многоугольник на холсте, используя простую функцию утилиты. Таким образом, общее решение должно работать для любого полигона. Следующий фрагмент будет принимать контекст canvas c, radius 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. Это в основном вычисление расстояния и угла положения мыши к центру многоугольника. Затем сравним его с границами многоугольника. Границы полигона могут быть выражены простым тригонометрия, так же, как мы вычислили вершины в

на redblog существует полное объяснение с математикой и рабочими примерами.

основная идея заключается в том, что шестиугольники горизонтально разнесены на $3/4$ размера шестиугольников, вертикально это просто $H$, но столбец должен быть принят во внимание вертикальное смещение. Красный цвет корпуса определяется путем сравнения x с y при срезе 1/4 Вт.