Vue利用canvas实现移动端手写板的方法
时间:2019-04-14
本文章向大家介绍Vue利用canvas实现移动端手写板的方法,主要包括Vue利用canvas实现移动端手写板的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文介绍了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- CaseStudy(showcase)界面篇-导出xaml以及放入Blend的技巧
- [Silverlight动画]转向行为 - 避开行为
- CaseStudy(showcase)界面篇-desing设计界面
- [Silverlight动画]转向行为 - 寻找行为
- 【数字货币】数字黄金
- [Silverlight动画]转向行为 - 转向机车
- [Silverlight动画]转向行为 - 机车
- 微信、小游戏与未来
- [Silverlight动画]转向行为 - 2D向量
- [Silverlight动画]转向行为 - 介绍
- WCF技术剖析之十七:消息(Message)详解(中篇)
- flash游戏引擎整理
- [Silverlight动画]转向行为 - 群落
- [Silverlight动画]转向行为 - 路径跟随
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SAP CRM订单数据库表CRMD_SHIPPING的填充原理
- 使用art-template模板引擎渲染数据
- SAP CRM索引数据库表CRMD_ORDER_INDEX的更新原理
- 将自己的nodeJS项目分享到npm上
- react中使用prop-types检测props数据类型
- git的常用命令及工作中冲突问题解决方法
- 关于react中的context
- 基于Node.js的Express框架
- react官方推荐的classnames库
- 在Deno中构建一个命令行天气预报程序
- react-router4
- redux
- react-redux
- Webstorm之界面美化-含破解版
- 使用Cmder替换cmd,让开发更高效