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 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
JavaScript利用键盘码控制div移动
Mar 19 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 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
Apache2 httpd.conf 中文版
2006/11/17 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中的super用法详解
2015/05/28 Python
python调用staf自动化框架的方法
2018/12/26 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
Python 高效编程技巧分享
2020/09/10 Python
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
求职简历自我评价怎么写
2015/03/10 职场文书
培训班通知
2015/04/25 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript
Golang并发工具Singleflight
2022/05/06 Golang
python标准库ElementTree处理xml
2022/05/20 Python