本文介绍了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- vue2.0实现移动端的输入框实时检索更新列表功能
- Vue + better-scroll 实现移动端字母索引导航功能
- vue 做移动端微信公众号采坑经验记录
- vue2.0 移动端实现下拉刷新和上拉加载更多的示例
- Vue三层嵌套路由的示例代码
- vue嵌套路由与404重定向实现方法分析
- Vue 动态设置路由参数的案例分析
- vue router动态路由下让每个子路由都是独立组件的解决方案
- vue iview实现动态路由和权限验证功能
- vue移动端路由切换实例分析