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 相关文章推荐
javascript+xml技术实现分页浏览
Jul 27 Javascript
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
使用js获取身份证年龄的示例代码
Dec 11 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 MySql增删改查的简单实例
2016/06/21 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
精通Javascript系列之数值计算
2011/06/07 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
从vue源码看props的用法
2019/01/09 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Python中遍历列表的方法总结
2019/06/27 Python
浅谈Python 递归算法指归
2019/08/22 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
工业学校毕业生自荐书
2014/01/03 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
学生手册家长评语
2014/02/10 职场文书
父母对孩子的寄语
2014/04/09 职场文书
项目负责人任命书
2014/06/04 职场文书
2014年班组长工作总结
2014/11/20 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers