起因：在cavnas繪制矩形時 鼠標移動一直在監測中，所以鼠標移動的軌跡會留下一個個的矩形框，
要想清除矩形框官方給出了ctx.clearRect() 但是這樣是把整個畫布給清空了，因此需要不斷
向畫布展示新的圖片，這樣就出現了不斷閃屏的問題。
那么怎么解決呢？
microsoft提供了雙緩沖圖形技術，可以點擊看看這邊文章。
具體就是畫圖的時候做兩個canvas層，一個臨時層 一個顯示層，鼠標的監聽事件放在顯示層處理，
每次清空的時候只清空臨時層，這樣就可以解決閃屏問題了。
部分代碼如下：
<!--臨時層--><canvas id="customPositionImg2" ref="table2" style=" display:none;"></canvas><!--顯示層 增加鼠標按下，移動，松開事件--><canvas id="customPositionImg" ref="table" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" style=""></canvas>
顯示層展示圖片：
//因為項目是dialog展示自定義畫板，所以圖片展示就寫在了dialog打開的鉤子里，如果需要直接復制vue.nextTick里面的代碼就行show () { vue.nextTick(_ => { let customCanvas =this.$refs.table;// canvas顯示層 this.customstyle =''; customCanvas.height = 740; customCanvas.width = 1460; this.customcxt = customCanvas.getContext("2d"); let img = new Image(); img.src = this.imgSrc; let that = this; img.onload = function () { that.customRwidth = customCanvas.width / img.width; //原圖與展示圖片的寬高比 that.customRheight = customCanvas.height / img.height; that.customcxt.drawImage(img, 0, 0, customCanvas.width, customCanvas.height); }; })},鼠標操作事件
//鼠標按下時執行mousedown(e){ this.isMouseDownInCanvas = true; // 鼠標按下時開始位置與結束位置相同 防止鼠標在畫完矩形后 點擊圖畫形成第二個圖形 this.endX = e.offsetX; this.endY = e.offsetY; this.startX = e.offsetX; this.startY = e.offsetY;},//鼠標移動式時執行mousemove(e){ if (this.isMouseDownInCanvas){ // 當鼠標有按下操作時執行 console.log( e.offsetX,e.offsetY); if((this.endX != e.offsetX)||( this.endY != e.offsetY)){ this.endX = e.offsetX; this.endY = e.offsetY; let wwidth = this.endX - this.startX; let wheigth = this.endY - this.startY; let tempCanvas = this.$refs.table2; // canvas臨時層 let tempCtx = tempCanvas.getContext('2d'); tempCanvas.width = 1460; tempCanvas.height = 740; // 設置寬高 // 清除臨時層指定區域的所有像素 tempCtx.clearRect(0, 0, 1460, 740); // 重新展示圖片 let img = new Image(); img.src = this.imgSrc; let that = this; img.onload = function () { that.customcxt.drawImage(img, 0, 0,1460, 740); }; this.customcxt.strokeStyle=" #00ff00"; //矩形框顏色 this.customcxt.lineWidth="2"; //矩形框寬度 this.customcxt.strokeRect(this.startX,this.startY,wwidth,wheigth); //繪制矩形 }else{ //鼠標按下靜止時顯示矩形的大小。 let wwidth2 = this.endX - this.startX; let wheigth2 = this.endY - this.startY; this.customcxt.strokeRect(this.startX,this.startY,wwidth2,wheigth2) } }},//鼠標松開時執行mouseup(e){ this.isMouseDownInCanvas = false; // 繪制最終的矩形框 let wwidth = this.endX - this.startX; let wheigth = this.endY - this.startY; this.customcxt.strokeRect(this.startX,this.startY,wwidth,wheigth)},總結
以上所述是小編給大家介紹的vue cavnas繪制矩形并解決由clearRec帶來的閃屏問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
