Получить размеры графического HTML5-холста (Arc), когда происходит событие

Question

Мой вопрос: как мне выполнить логическую и математическую часть, чтобы вычислить положение каждой дуги, когда генерируется событие: «щелчок», «наведение мыши» и т. Д.

Обсуждаемые вопросы:

. Ширина линии

. Это округленные линии.

. Длина дуги в процентах.

. Какой элемент является первым, ej: позиция z-индекса.

Мой исходный код

Спасибо за ваше время.

Answer 1

Для этого есть удобный isPointInStroke() метод.

Чтобы принять во внимание z-index, просто отметьте в обратном порядке:

const ctx = canvas.getContext('2d');
const centerX = canvas.width/2;
const centerY = canvas.height/2;
const rad = Math.min(centerX, centerY) * 0.75;
const pathes = [
  {
    a: Math.PI/4,
    color: 'white'
  },
  {
    a: Math.PI/1.5,
    color: 'cyan'
  },
  {
    a: Math.PI,
    color: 'violet'
  },
  {
    a: Math.PI*2,
    color: 'gray'
  }
];
pathes.forEach(obj => {
  const p = new Path2D();
  p.arc(centerX, centerY, rad, -Math.PI/2, obj.a-Math.PI/2);
  obj.path = p;
});

ctx.lineWidth = 12;
ctx.lineCap = 'round';

function draw() {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  // since we sorted first => higher z-index
  for(let i = pathes.length-1; i>=0; i--) {
    let p = pathes[i];
    ctx.strokeStyle = p.hovered ? 'green' : p.color;
    ctx.stroke(p.path);
  };
}
function checkHovering(evt) {
  const rect = canvas.getBoundingClientRect();
  const x = evt.clientX - rect.left;
  const y = evt.clientY - rect.top;
  let found = false;
  pathes.forEach(obj => {
    if(found) {
      obj.hovered = false;
    }
    else {
      found = obj.hovered = ctx.isPointInStroke(obj.path, x, y);
    }
  });
  draw();
}

draw();
canvas.onmousemove = canvas.onclick = checkHovering;

 

canvas{background: lightgray}

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

И если вам нужна поддержка IE, этот полифилл должен подойти.

Answer 2

Гораздо лучше «запомнить» объекты, которые вы нарисовали, чем рисовать их и пытаться собрать то, чем они являются из того, что вы нарисовали.Так, например, вы можете сохранить информацию рендеринга: (я не знаю машинопись)

let curves = [{start: 30, length: 40, color: "white"}/*...*/];

Затем отрендерить ее:

ctx.fillStyle = curve.color;
ctx.arc(CENTER_X, CENTER_Y, RADIUS, percentToRadians(curve.start), percentToRadians(curve.start + curve.length));

Затем, чтобы получить информацию,просто ссылка curves.Значения z зависят от порядка очереди рендеринга (curves).

Конечно, вы, вероятно, могли бы собрать эти данные с холста, но я бы не рекомендовалэто.