Как добавить обработчик события onClick к элементу canvas (дуга)? - PullRequest
Новая
       24

Как добавить обработчик события onClick к элементу canvas (дуга)?

0 голосов
/ 16 декабря 2018

Я помещаю элемент в массив, поэтому зацикливаю их.Как я делаю следующее.Я хочу щелкнуть область круга и затем что-то предупредить.Я нашел ответ прямоугольником, так как же сделать круг?

<script>

  var elements = [];
  elemLeft = canvas.offsetLeft,
  elemTop = canvas.offsetTop;


  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

  elements.push({
      colour: '#112F41',
      x:200,
      y:240,
      r:100,
      sAngle:0,
      eAngle:2 * Math.PI
  });

  elements.forEach(function(element) {
      context.strokeStyle = element.colour;
      context.arc(element.x, element.y, element.r, element.sAngle, element.eAngle);
      context.lineWidth = 20;

      context.stroke();
  });

  canvas.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;
    console.log(x, y);
    elements.forEach(function(element) {
        //??????
    });

}, false);

</script>

Ответы [ 2 ]

0 голосов
/ 16 января 2019

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

Simple Теорема Пифагора

ПРИМЕЧАНИЕ: этоМетод также обеспечивает полную поддержку браузера. 

var elements = [];
var canvas = document.getElementById("myCanvas");
canvas.width = "500";
canvas.height = "500";
var context = canvas.getContext("2d");

var mouse;

elements.push({
  colour: "#112F41",
  x: 200,
  y: 240,
  r: 100,
  sAngle: 0,
  eAngle: 2 * Math.PI
});

elements.forEach(element => {
  drawElement(element, context);
});

canvas.addEventListener(
  "click",
  function(event) {
    mouse = oMousePos(canvas, event)
    elements.forEach(function(element) {
      drawElement(element, context);
      // method using point to circle collision detection
      if (pointInCircle(element, mouse)) {
        console.log(mouse)
      } else {
        console.log("not in path")
      }
    });
  },
  false
);

// pointInCircle
function pointInCircle(circle, mouse) {
   let dx = circle.x - mouse.x;
   let dy = circle.y - mouse.y;
   let dist = Math.sqrt(dx*dx + dy*dy);
   
   if (dist < circle.r) return true;
   return false
}

function drawElement(element, context) {
  context.strokeStyle = element.colour;
  context.arc(element.x, element.y, element.r, element.sAngle, element.eAngle);
  context.lineWidth = 2;

  context.stroke();
}

function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
  return {
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  }
}
<canvas id="myCanvas"></canvas>
0 голосов
/ 16 декабря 2018

Вам нужно перерисовать фигуру перед вызовом метода isPointInPath.

Я добавил в ваш код функцию для определения положения мыши и другую, которая рисует элемент.Надеюсь, это поможет. 

var elements = [];
var canvas = document.getElementById("myCanvas");
canvas.width = "500";
canvas.height = "500";
var context = canvas.getContext("2d");

var mouse;

elements.push({
  colour: "#112F41",
  x: 200,
  y: 240,
  r: 100,
  sAngle: 0,
  eAngle: 2 * Math.PI
});

elements.forEach(element => {
  drawElement(element, context);
});

canvas.addEventListener(
  "click",
  function(event) {
    mouse = oMousePos(canvas, event)
    elements.forEach(function(element) {
      drawElement(element, context);
      if(context.isPointInPath(mouse.x, mouse.y)){console.log(mouse)}else{console.log("not in path")}
    });
  },
  false
);

function drawElement(element, context) {
  context.strokeStyle = element.colour;
  context.arc(element.x, element.y, element.r, element.sAngle, element.eAngle);
  context.lineWidth = 2;

  context.stroke();
}

function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
  return { //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  }
}
canvas {
  border:1px solid;
}
<canvas id="myCanvas"></canvas>
...