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


Posted in Javascript onSeptember 02, 2019

起因:在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带来的闪屏问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS跨域问题详解
Nov 25 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
layui数据表格跨行自动合并的例子
Sep 02 #Javascript
Vue form表单动态添加组件实战案例
Sep 02 #Javascript
小程序和web画三角形实现解析
Sep 02 #Javascript
vue-cli随机生成port源码的方法
Sep 02 #Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 #Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 #Javascript
js中比较两个对象是否相同的方法示例
Sep 02 #Javascript
You might like
PHP4.04简明安装
2006/10/09 PHP
header()函数使用说明
2006/11/23 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
深入理解Node module模块
2018/03/26 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
python使用Matplotlib画条形图
2020/03/25 Python
django的model操作汇整详解
2019/07/26 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
this关键字的含义
2015/04/08 面试题
公司前台辞职报告
2014/01/19 职场文书
毕业生自荐书
2014/02/03 职场文书
cf收人广告词
2014/03/14 职场文书
教师学期个人总结
2015/02/11 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书