Vue利用canvas实现移动端手写板的方法


Posted in Javascript onMay 03, 2018

本文介绍了Vue利用canvas实现移动端手写板的方法,分享给大家,具体如下:

<template>
 <div class="hello">
<!--touchstart,touchmove,touchend,touchcancel 这-->
 <button type="" v-on:click="clear">清除</button>
 <button v-on:click="save">保存</button>
  <canvas id="canvas" width="300" height="600" style="border:1px solid black">Canvas画板</canvas>
  <img v-bind:src="url" alt="">
 </div>
 
</template>

<script>
var draw;
var preHandler = function(e){e.preventDefault();}
class Draw {
  constructor(el) {
    this.el = el
    this.canvas = document.getElementById(this.el)
    this.cxt = this.canvas.getContext('2d')
    this.stage_info = canvas.getBoundingClientRect()
    this.path = {
      beginX: 0,
      beginY: 0,
      endX: 0,
      endY: 0
    }
  }
  init(btn) {
    var that = this; 
    
    this.canvas.addEventListener('touchstart', function(event) {
      document.addEventListener('touchstart', preHandler, false); 
      that.drawBegin(event)
    })
    this.canvas.addEventListener('touchend', function(event) { 
      document.addEventListener('touchend', preHandler, false); 
      that.drawEnd()
      
    })
    this.clear(btn)
  }
  drawBegin(e) {
    var that = this;
    window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()
    this.cxt.strokeStyle = "#000"
    this.cxt.beginPath()
    this.cxt.moveTo(
      e.changedTouches[0].clientX - this.stage_info.left,
      e.changedTouches[0].clientY - this.stage_info.top
    )
    this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left
    this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top
    canvas.addEventListener("touchmove",function(){
      that.drawing(event)
    })
  }
  drawing(e) {
    this.cxt.lineTo(
      e.changedTouches[0].clientX - this.stage_info.left,
      e.changedTouches[0].clientY - this.stage_info.top
    )
    this.path.endX = e.changedTouches[0].clientX - this.stage_info.left
    this.path.endY = e.changedTouches[0].clientY - this.stage_info.top
    this.cxt.stroke()
  }
  drawEnd() {
    document.removeEventListener('touchstart', preHandler, false); 
    document.removeEventListener('touchend', preHandler, false);
    document.removeEventListener('touchmove', preHandler, false);
    //canvas.ontouchmove = canvas.ontouchend = null
  }
  clear(btn) {
    this.cxt.clearRect(0, 0, 300, 600)
  }
  save(){
    return canvas.toDataURL("image/png")
  }
}

export default {
 data () {
  return {
   msg: 'Welcome to Your Vue.js App',
   val:true,
   url:""
  }
 },
 mounted() {
   draw=new Draw('canvas');
   draw.init();
 },
 methods:{
  clear:function(){
    draw.clear();
  },
  save:function(){
    var data=draw.save();
    this.url = data;
    console.log(data)
  },

 mutate(word) {
     this.$emit("input", word);
   },
} 
} 
</script> 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
#canvas {
 background: pink;
 cursor: default;
}
#keyword-box {
 margin: 10px 0;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
JavaScript实现滑块验证解锁
Jan 07 Javascript
Node.Js中实现端口重用原理详解
May 03 #Javascript
原生JS实现的雪花飘落动画效果
May 03 #Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 #Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 #Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 #Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 #Javascript
Angular学习教程之RouterLink花式跳转
May 03 #Javascript
You might like
php中如何防止表单的重复提交
2013/08/02 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
Yii使用技巧大汇总
2015/12/29 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
js模仿hover的具体实现代码
2013/12/30 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
python 数据加密代码
2008/12/24 Python
python文件拆分与重组实例
2018/12/10 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
学生鉴定评语大全
2014/05/05 职场文书
空气环保标语
2014/06/12 职场文书
个人自我剖析材料
2014/09/30 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
学校隐患排查制度
2015/08/05 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python