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 实现完美include载入实现代码
Aug 05 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 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
php 保留小数点
2009/04/21 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
Angular 项目实现国际化的方法
2018/01/08 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
简单介绍Object类的功能、常用方法
2013/10/02 面试题
四年的大学生生活自我评价
2013/12/09 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
大学三年计划书范文
2014/04/30 职场文书
我的老师教学反思
2014/05/01 职场文书
宣传活动总结范文
2014/07/01 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书