Карты очистки холста

Question

Когда я нажимаю на элемент карты, я хочу, чтобы он очистил холст и перерисовал все, кроме карты, на которую щелкнули.

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

let elem = document.getElementById("canvas"),
ctx = elem.getContext("2d"),
elemLeft = elem.offsetLeft,
elemTop = elem.offsetTop;
let drawHelper = {
   pintarImagenes: function() {
         imagenes.forEach(function(image){
           drawHelper.pintarImagen(image);
         });
   },
   pintarImagen: function(image) {
     ctx.save();
     ctx.drawImage(image.image, image.x, image.y);
     ctx.clip();
     ctx.restore();
   }
};
let distancias =[30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 360, 390, 410, 440, 470, 510, 540, 570, 600, 630, 660, 690, 720, 750, 780, 810, 840, 870, 900];
let imagenes = [];
for ( let i = 0; i < 22; i++) {
  imagenes.push({
    x: (30*i),
    x1:((30*i)+270),
    y: 20,
    y1: 545,
    image: new Image()
  });
  imagenes[i].image.src = 'image.png';
  imagenes[i].image.onload = drawHelper.pintarImagenes;
}
elem.addEventListener('click', function onClickCanvas(event){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
      let i = 0;
      let newImagesArray = [];
      imagenes.forEach(function(image = distancias[i]){
        if( image.x <= event.clientX
          && image.y <= event.clientY
          && image.x1 >= event.clientX
          && image.y1 >= event.clientY){
            console.log(i);
          } else {
            newImagesArray.push(image);
          }
          i++;
        });
        imagenes = newImagesArray;
        drawHelper.pintarImagenes();
      });

Codepen: https://codepen.io/Raya082/pen/XWbpGKY

Answer 1

Несколько проблем:

• Ширина изображения больше 270, поэтому измените x1:((30*i)+270) на x1:((30*i)+340)

• Курсор позиция, заданная clientX и clientY, не относится к элементу canvas, поэтому используйте event.clientX - elem.offsetLeft и event.clientY - elem.offsetTop, чтобы перейти вправо x, y координаты.

• Поскольку у вас есть перекрывающиеся карты, ваше состояние часто будет соответствовать более чем одной карте. В действительности вы хотите соответствовать только крайнему правому этих кандидатов, поскольку перекрытие происходит слева направо, что также является порядком массива imagenes. Поскольку вам нужно не более одного совпадения, вы можете лучше использовать findIndex вместо forEach: найдите первую карту, которая приходит после X-координаты курсора, и удалите карту, которая предшествует этой карте .

Вот исправленный код для работы с последними двумя пунктами:

elem.addEventListener('click', function onClickCanvas(event){
    let x = event.clientX - elem.offsetLeft;
    let y = event.clientY - elem.offsetTop;
    let i = imagenes.findIndex(image => image.x > event.clientX);
    if (i == -1) i = imagenes.length;
    i--;
    if (i >= 0) {
        let image = imagenes[i];
        if (image.x <= x && image.y <= y && image.x1 >= x && image.y1 >= y) {
           imagenes.splice(i, 1);
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        drawHelper.pintarImagenes();
    }
});