キャンバス内の要素を自動的に削除/リフレッシュする

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

あなたが描いているだけなので、最後のクリックが表示されていますイメージとそれはtを行っているoキャンバス全体をオーバーレイすると、this.props.beam_markXとthis.props.beam_markYの線が描画され、1行しか描画されません。あなたがこれを行う方法は、xとyの値を配列内のstoreをクリックするたびにキャンバスをクリアし、イメージを描画し、線を再描画します。次に例を示します。

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(){ 
 
\t //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){ 
 
    \t \t //Y Axis Line 
 
    \t \t 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){ 
 
\t \t \t 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);はあなたの前の図面の上に描画されます。残りのマーカーは、画像がロードされた後に描画されるマーカーだけです。