Удалить контекстную дугу с холста

Question

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

Я хочу удалить нарисованную дугу с холста.Как мне это сделать?

Я пробовал clearRect.Но это не работает в этом случае.

Пожалуйста, дайте мне знать.

 componentDidMount() {
    const img = this.refs.image;
    const canvas = this.refs.canvas;
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    img.onload = () => {
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      ctx.font = "40px Courier";
      ctx.fillText('Drawing 1', 200, 100);
    }
  }
 drawCircle(x, y, getcolor) {

    const canvas = this.refs.canvas;
    const ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(x, y, 8, 0, Math.PI * 2, false);
    ctx.strokeStyle = "black";
    ctx.stroke();
    ctx.fillStyle = getcolor;
    ctx.fill();
    ctx.closePath();

    // Text
    ctx.beginPath();
    ctx.font = "20px Arial"
    ctx.fillStyle = "#00538a";
    ctx.textAlign = "center";
    ctx.fillText(this.state.count, x , y - 20);
    ctx.fill();
    ctx.closePath();
  }

 remove(id) {
    this.setState({
      comments: this.state.comments.filter(c => c.id !== id)
    });
    const canvas = this.refs.canvas;
    const ctx = canvas.getContext('2d');
    const arc = this.state.comments.filter(c => c.id === id);
    let x = arc[0].coordinates.x;
    let y = arc[0].coordinates.y
    console.log("TCL: Drawing -> remove -> arc", arc[0].coordinates);
    ctx.beginPath();
    ctx.arc(x, y, 8, 0, Math.PI * 2, false);
    ctx.clip();
    ctx.clearRect(x-8, y-8, 16,16);
  }

Спасибо Встречаемся

Answer 1

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

Если вы вызовете clearRect () на холсте, он по существу перезапишет целевую область, включая исходное фоновое изображение.

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

Если щелкнуть холст -> добавить элемент массива в массив -> очистить холст -> снова нарисовать диаграмму -> зациклить массив, чтобы нарисовать круги сверху

Если вы нажмете кнопку удаления круга -> найдите в массиве именно этот круг -> удалите его из массива -> очистите холст -> снова нарисуете диаграмму -> зациклите массив, чтобы нарисовать круги на верх

Вот пример, иллюстрирующий то, о чем я говорю:

var comments = new Array();
var canvas = document.createElement("canvas");
canvas.style="float:left;"
canvas.width = 400;
canvas.height = 200;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

function updateCanvas() {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  ctx.font = "40px Courier";
  ctx.fillText('Drawing 1', 200, 100);
  for (var a = 0; a < comments.length; a++) {
    ctx.beginPath();
    ctx.arc(comments[a].x, comments[a].y, 8, 0, Math.PI * 2, false);
    ctx.strokeStyle = "black";
    ctx.stroke();
    ctx.fillStyle = "black";
    ctx.fill();
    ctx.closePath();
  }
}

var img = new Image();
img.onload = () => {
  updateCanvas();
}
img.src = "https://picsum.photos/id/59/400/200";

function addCircle(e) {

  var div = document.createElement("div");
  div.innerHTML = "remove" + comments.length;
  document.body.appendChild(div);
  div.addEventListener("click", function(e) {
  
    for (var a = 0; a < comments.length; a++) {
      if (comments[a].div == e.target) {
        comments.splice(a, 1);
        break;
      }
    }
    document.body.removeChild(e.target);
    updateCanvas();
  });
  
  comments.push({
    x: e.clientX,
    y: e.clientY,
    div: div
  });
  updateCanvas();
}

canvas.addEventListener("click", addCircle);

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