2

Сделал на canvas`e треугольник. Для функции нужно написать условия клика внутри этой фигуры.

Код функции:

    //x1=50, x2=0, x3=0, y1=75, y2=100, y3=75
    ctx.beginPath();
    ctx.moveTo(this.x1, this.x2);
    ctx.lineTo(this.x3, this.y1);
    ctx.lineTo(this.y2, this.y3);
    ctx.fill();

Условие попадания клика (как я пытался написать/как я это вижу):

return mouse.x>rect.x1 && 
mouse.x<rect.x1+rect.x2 &&
mouse.y>rect.y1 &&
mouse.y<rect.y1+rect.y2;

Понимаю, что в этом очень сложно разобраться, но не могу составить адекватное условие для попадания клика внутрь фигуры

3
  • фигура это треугольник? какие координаты его вершин?
    – user176262
    9 мая 2018 в 19:46
  • @Igor, верхняя: [50,0]; левая:[0,75]; правая:[100,75]
    – Mr.Flatman
    9 мая 2018 в 19:49
  • 2
    если луч из точки в бесконечность пересекает стороны многоугольника нечетное количество раз, точка - внутри многоугольника
    – user176262
    9 мая 2018 в 19:51

2 ответа 2

3

Ответ построен на основе ответа @Pavel.

Дело в том, что ответ @Pavel не учитывает, если треугольников больше одного в канвасе. Поскольку функция isPointInPath(x,y) будет проверять последний закрытый путь.

Для исправления этой ситуации в функцию isPointInPath можно передать путь, для которого и будет высчитываться, находится ли в нем точка.

Пример исправленной версии.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var triangles = [{
    points: [{
        x: 50,
        y: 0
      },
      {
        x: 0,
        y: 75
      },
      {
        x: 100,
        y: 75
      }
    ],
    path2D: null
  },
  {
    points: [{
        x: 175,
        y: 0
      },
      {
        x: 150,
        y: 75
      },
      {
        x: 200,
        y: 75
      }
    ],
    path2D: null
  }
];


function draw(triangle) {
  let path = new Path2D();
  triangle.points.forEach(function(p, j) {
    if (j) {
      path.lineTo(p.x, p.y);
    } else {
      path.moveTo(p.x, p.y);
    }
  });
  path.lineTo(triangle.points[0].x, triangle.points[0].y);
  ctx.stroke(path);
  path.closePath();
  triangle.path2D = path;
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
    y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
  };
}

canvas.addEventListener('mousedown', function(e) {
  var mouse = getMousePos(canvas, e);
  triangles.forEach((triangle, ind) => {
    if (ctx.isPointInPath(triangle.path2D, mouse.x, mouse.y)) {
      console.log('click inside ' + ind);
    }
  });
});

triangles.forEach(t => draw(t));
<canvas id="canvas"></canvas>

2

Попробуйте лучше использовать метод isPointInPath()

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var triganle = [
    {x: 50, y: 0},
    {x: 0, y: 75},
    {x: 100, y: 75}
];

function draw(points) {
    ctx.beginPath();
    points.forEach(function (p, j) {
        if (j) {
            ctx.lineTo(p.x, p.y);
        } else {
            ctx.moveTo(p.x, p.y);
        }
    });
    ctx.lineTo(points[0].x, points[0].y);
    ctx.stroke();
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
        y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
    };
}

canvas.addEventListener('mousedown', function (e) {
    var mouse = getMousePos(canvas, e);
    if (ctx.isPointInPath(mouse.x,mouse.y)) {
      console.log('ok');
    }
});

draw(triganle);
<canvas id="canvas"></canvas>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.