溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
起因：在cavnas繪制矩形時 鼠標移動一直在監測中，所以鼠標移動的軌跡會留下一個個的矩形框，
要想清除矩形框官方給出了ctx.clearRect() 但是這樣是把整個畫布給清空了，因此需要不斷
向畫布展示新的圖片，這樣就出現了不斷閃屏的問題。
那么怎么解決呢？
microsoft提供了雙緩沖圖形技術，可以點擊看看這邊文章。
具體就是畫圖的時候做兩個canvas層，一個臨時層 一個顯示層，鼠標的監聽事件放在顯示層處理，
每次清空的時候只清空臨時層，這樣就可以解決閃屏問題了。
部分代碼如下：
<!--臨時層--> <canvas id="customPositionImg2" ref="table2" ></canvas> <!--顯示層 增加鼠標按下，移動，松開事件--> <canvas id="customPositionImg" ref="table" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" ></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 wwidth3 = this.endX - this.startX;
let wheigth3 = this.endY - this.startY;
this.customcxt.strokeRect(this.startX,this.startY,wwidth3,wheigth3)
}
}
},
//鼠標松開時執行
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帶來的閃屏問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
