Question

我有一个带有websocket的相机发送的图像，我用画布显示它，然后，我画上它。当用户点击其他地方时，我试图删除之前的行并绘制新的行，但是，我已经读过，这是不可能清除画布的精确部分，但是，令人惊讶的是，它＆＃ 39; s发生在我身上。

所以我想知道它为什么会起作用，即使我读过多次不可能的事情。

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

感谢您的帮助，以及我的代码示例

Imgproc.findContours(mat.clone(), contours, hierarchy, Imgproc.RETR_TREE, Imgproc.CHAIN_APPROX_SIMPLE);

Answer 1

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

＆＃13;

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();
}

＆＃13;

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

＆＃13;

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

＆＃13;

希望它有所帮助!! ：

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);将覆盖您之前的图纸。将保留的唯一标记是在图像加载后绘制的标记。

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

2 个答案: