自动删除/刷新画布中的元素

Question

我有一个带有 websocket 的相机发送的图像，我用画布显示它，然后，我在上面画画。当用户单击不同的位置时，我尝试删除以前的行并绘制新的行，但是，我读过不可能清除画布的精确部分，但是，令人惊讶的是，这发生在我身上.

所以我想知道为什么即使我阅读了多次这是不可能的。

第一次启动程序时还没有图片，没有刷新但是显示第一张图片时，我可以点击很多次，只有最后一次点击会显示，我不明白为什么。

感谢您的帮助，这里是我的代码示例

    updateImage(){
    console.log(this.refs.myCanvas);

    const ctx = this.refs.myCanvas.getContext('2d');
    let src = this.state.imageSrc;

    this.image.onload = () => {
      console.log('done')
      //ctx.clearRect(0,0,this.refs.myCanvas.width,this.refs.myCanvas.height)
      ctx.drawImage(this.image, 0, 0,this.refs.myCanvas.width,this.refs.myCanvas.height); //On dessine l'image
      if(this.props.beam_markX != undefined && this.props.beam_markY != undefined){
        this.draw_Beam_Marker()
      }

    }
    this.image.src = "data:image/jpg;base64,"+src;
    this.componentWillUnmount() //On appel la derniere methode

  }

  draw_Beam_Marker(e){
    const ctx = this.refs.myCanvas.getContext('2d');
    ctx.strokeStyle = "#7FFF00" //chartreuse
    ctx.font = '15px Arial'
    ctx.fillStyle = "#7FFF00"

    if(e != undefined){ //Quand on clique sur l'image

      if(this.props.beam_markX != e.nativeEvent.offsetX && this.props.beam_markY != e.nativeEvent.offsetY && this.props.crosshair === 0){ //On ne dessine que si nouveaux coordonnes et que le crosshair n'est pas lock

        ctx.beginPath();
        ctx.moveTo(0, e.nativeEvent.offsetY);
        ctx.lineTo(this.refs.myCanvas.width, e.nativeEvent.offsetY);
        ctx.stroke();
        ctx.moveTo(e.nativeEvent.offsetX, 0);
        ctx.lineTo(e.nativeEvent.offsetX, this.refs.myCanvas.height);
        ctx.stroke();
        ctx.fillText("X: "+e.nativeEvent.offsetX,e.nativeEvent.offsetX+1,e.nativeEvent.offsetY+12);
        ctx.fillText("Y: "+e.nativeEvent.offsetY,e.nativeEvent.offsetX+1,e.nativeEvent.offsetY+30);
        ctx.fillText("W: "+this.refs.myCanvas.width,e.nativeEvent.offsetX+1,e.nativeEvent.offsetY+48);
        ctx.fillText("H: "+this.refs.myCanvas.height,e.nativeEvent.offsetX+1,e.nativeEvent.offsetY+66);
        ctx.closePath();
        this.props.setBeamMark(e.nativeEvent.offsetX,e.nativeEvent.offsetY);

      }
    }
      else if(this.props.beam_markX != undefined && this.props.beam_markY != undefined ){ //Quand on passe a une nouvelle image
        //ctx.clearRect(0,0,this.refs.myCanvas.width,this.refs.myCanvas.height)
        ctx.beginPath();
        ctx.moveTo(0, this.props.beam_markY);
        ctx.lineTo(this.refs.myCanvas.width, this.props.beam_markY);
        ctx.stroke();
        ctx.moveTo(this.props.beam_markX, 0);
        ctx.lineTo(this.props.beam_markX, this.refs.myCanvas.height);
        ctx.stroke();
        ctx.fillText("X: "+this.props.beam_markX,this.props.beam_markX+1,this.props.beam_markY+12)
        ctx.fillText("Y: "+this.props.beam_markY,this.props.beam_markX+1,this.props.beam_markY+30);
        ctx.fillText("W: "+this.refs.myCanvas.width,this.props.beam_markX+1,this.props.beam_markY+48);
        ctx.fillText("H: "+this.refs.myCanvas.height,this.props.beam_markX+1,this.props.beam_markY+66);
        ctx.closePath();
      }
  }

Answer 1

仅显示最后一次单击，因为您正在绘制图像并且将覆盖整个画布，然后您正在绘制线条this.props.beam_markX 和this.props.beam_markY，这只会绘制一条线。您可以这样做的一种方法是每次单击将 x 和 y 值存储在数组中时：清除画布，绘制图像，然后重新绘制线条！这是一个例子：

var canvas = document.querySelectorAll('canvas')[0]
var ctx = canvas.getContext('2d')
var clicks = []
canvas.addEventListener('click', function(event){
    var x = event.clientX
    var y = event.clientY

    clicks.push({
      x:event.clientX,
      y:event.clientY
    })
    
    drawLines()
})

function drawLines(){
	//Make the canvas blank
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  //Draw your image here
  //ctx.drawImage
  
  //Draw the lings
  for(var click of clicks){
  		//Y Axis Line
  		drawLine(click.x, 0, click.x, canvas.height)
      //X Axis Line
      drawLine(0, click.y, canvas.width, click.y)
      //Text
      ctx.fillText(click.x + ', ' + click.y,click.x,click.y)
      
  }
}

function drawLine(x1, y1, x2, y2){
			ctx.beginPath();
      ctx.moveTo(x1,y1);
      ctx.lineTo(x2,y2);
      ctx.stroke();
}

html, body{
  margin:0px;
  padding:0px;
}
canvas{
  background:#cdcdcd;
}

<canvas width="200" height="200"></canvas>
<p>Click in the canvas!</p>

希望对你有帮助！！ :]

Answer 2

您的全部问题在于这段代码：

this.image.onload = () => {
  console.log('done')
  //ctx.clearRect(0,0,this.refs.myCanvas.width,this.refs.myCanvas.height)
  ctx.drawImage(this.image, 0, 0,this.refs.myCanvas.width,this.refs.myCanvas.height); //On dessine l'image
  if(this.props.beam_markX != undefined && this.props.beam_markY != undefined){
    this.draw_Beam_Marker() 
  }
}

简单地说，这个声明ctx.drawImage(this.image, 0, 0, this.refs.myCanvas.width, this.refs.myCanvas.height); 将覆盖您之前的图纸。唯一保留的标记是加载图像后绘制的标记。