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 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
vue页面切换项目实现转场动画的方法
Nov 12 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抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
python求众数问题实例
2014/09/26 Python
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
python实现排序算法解析
2018/09/08 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
在Python中表示一个对象的方法
2019/06/25 Python
python 实现识别图片上的数字
2019/07/30 Python
Python中return函数返回值实例用法
2020/11/19 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
机电一体化专业应届生求职信
2013/11/27 职场文书
表彰先进集体通报
2014/01/12 职场文书
岗位竞聘书范文
2014/03/31 职场文书
有关爱国演讲稿
2014/05/07 职场文书
农村门前三包责任书
2014/07/25 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers