Vue利用canvas實現移動端手寫板的方法

NO IMAGE

本文介紹了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移動端路由切換例項分析