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。如果单击它，关联的圆圈将被删除。

从画布中删除上下文Arc

1 个答案: