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 相关文章推荐
javascript html 静态页面传参数
Apr 10 Javascript
Javascript的匿名函数小结
Dec 31 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
Javascript复制实例详解
Jan 28 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 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
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
JS验证字符串功能
2017/02/22 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
什么时候用assert
2015/05/08 面试题
大学同学十年聚会感言
2014/02/21 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
白血病募捐倡议书
2014/05/14 职场文书
英语教研活动总结
2014/07/02 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
部门2014年度工作总结
2014/11/12 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
Java实现多线程聊天室
2021/06/26 Java/Android
浅谈MySQL中的六种日志
2022/03/23 MySQL
实战Python爬虫爬取酷我音乐
2022/04/11 Python