Vue利用canvas实现移动端手写板的方法
2018-05-03 15:52
1026 查看
本文介绍了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue利用canvas实现移动端手写板
- 利用Vue实现移动端图片轮播组件的方法实例
- 利用vue+elementUI实现部分引入组件的方法详解
- 利用vue + element实现表格分页和前端搜索的方法
- 利用canvas实现鼠标拖拽效果的一种方法
- vue移动端监听滚动条高度的实现方法
- 利用canvas实现田字格里写字,并适配移动端
- 利用vue.js实现被选中状态的改变方法
- js小方法+Canvas 利用js 实现浏览器保存图片到本地
- vue中实现移动端的scroll滚动方法
- vue移动端iso 利用钩子里面的导航守卫beforeRouteLeave实现返回按钮不返回上一次路由,返回到自己指定的路由
- Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
- 利用vue组件自定义v-model实现一个Tab组件方法示例
- 利用图形页实现动画的方法
- 在ASP.Net中两种利用CSS实现多界面的方法
- 在ASP.Net中两种利用CSS实现多界面的方法
- 利用数学方法来大大降低一个逻辑判断实现的难度的例子
- 在ASP.Net中两种利用CSS实现多界面的方法
- 利用数学方法来大大降低一个逻辑判断实现的难度的例子
- [转]在ASP.Net中两种利用CSS实现多界面的方法