vue canvas绘制矩形并解决由clearRec带来的闪屏问题

2023-08-15 11:16:04 301

起因：在cavnas绘制矩形时鼠标移动一直在监测中，所以鼠标移动的轨迹会留下一个个的矩形框，

要想清除矩形框官方给出了ctx.clearRect()但是这样是把整个画布给清空了，因此需要不断

向画布展示新的图片，这样就出现了不断闪屏的问题。

那么怎么解决呢？

microsoft提供了双缓冲图形技术，可以点击看看这边文章。

具体就是画图的时候做两个canvas层，一个临时层一个显示层，鼠标的监听事件放在显示层处理，

每次清空的时候只清空临时层，这样就可以解决闪屏问题了。

部分代码如下：

显示层展示图片：

//因为项目是dialog展示自定义画板，所以图片展示就写在了dialog打开的钩子里，如果需要直接复制
vue.nextTick里面的代码就行
show(){
vue.nextTick(_=>{
letcustomCanvas=this.$refs.table;//canvas显示层
this.customstyle='';
customCanvas.height=740;
customCanvas.width=1460;
this.customcxt=customCanvas.getContext("2d");
letimg=newImage();
img.src=this.imgSrc;
letthat=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;
letwwidth=this.endX-this.startX;
letwheigth=this.endY-this.startY;
lettempCanvas=this.$refs.table2;//canvas临时层
lettempCtx=tempCanvas.getContext('2d');
tempCanvas.width=1460;tempCanvas.height=740;//设置宽高
//清除临时层指定区域的所有像素
tempCtx.clearRect(0,0,1460,740);
//重新展示图片
letimg=newImage();
img.src=this.imgSrc;
letthat=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{
//鼠标按下静止时显示矩形的大小。
letwwidth2=this.endX-this.startX;
letwheigth2=this.endY-this.startY;
this.customcxt.strokeRect(this.startX,this.startY,wwidth2,wheigth2)
}
}
},
//鼠标松开时执行
mouseup(e){
this.isMouseDownInCanvas=false;
//绘制最终的矩形框
letwwidth=this.endX-this.startX;
letwheigth=this.endY-this.startY;
this.customcxt.strokeRect(this.startX,this.startY,wwidth,wheigth)
},

总结

以上所述是小编给大家介绍的vuecavnas绘制矩形并解决由clearRec带来的闪屏问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue canvas绘制矩形并解决由clearRec带来的闪屏问题

热门推荐

随机推荐