Vue利用canvas实现移动端手写板
2017-09-08 14:26
495 查看
<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移动端iso 利用钩子里面的导航守卫beforeRouteLeave实现返回按钮不返回上一次路由,返回到自己指定的路由
- 利用canvas实现田字格里写字,并适配移动端
- 利用VUE框架,实现列表分页功能示例代码
- vue移动端实现红包雨效果
- vue利用better-scroll实现轮播图与页面滚动详解
- vue实现一个移动端屏蔽滑动的遮罩层
- 利用vue2.0的导航钩子实现移动端路由跳转时让滚动条回到顶部
- 移动端Touch事件与H5-Canvas像素点检测实现刮刮乐
- vue移动端监听滚动条高度的实现方法
- 利用canvas前端实现图片压缩后上传
- Vue.js实现移动端短信验证码功能
- 利用canvas+Chart.js实现动态折线图
- Canvas与Image互相转换示例以及利用该技术实现微信长按自动识别二维码功能
- 利用canvas画text时的换行实现
- 移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件
- 利用canvas加vauleAnimator自定义drawable实现加载loading效果
- 利用vue实现多层循环
- vue 在移动端实现红包雨 (兼容性好)