介绍 & lt; template>
,& lt; div 类=癶ello"比;
& lt; !——touchstart touchmove、touchend touchcancel 这——比;
,& lt; button 类型=啊?v:点击=癱lear"在清除& lt;/button>
,& lt; button v:点击=皊ave"在保存& lt;/button>
& lt;才能canvas id=癱anvas",宽度=?00“,身高=?00“,在画布上画板& lt;/canvas>
& lt;才能img v-bind: src=https://www.yisu.com/zixun/" url " alt=" ">
脚本
var画;
var preHandler=function (e) {e.preventDefault ();}
类画{
构造函数(el) {
这一点。el=这一点。帆布=. getelementbyid (this.el)
这一点。cxt=this.canvas.getContext (2 d)
这一点。stage_info=canvas.getBoundingClientRect ()
这一点。路径={
beginX: 0,
beginY: 0,
endX: 0,
恩迪:0
}
}
init (btn) {
var=这个;
this.canvas。addEventListener (touchstart,函数(事件){
文档。addEventListener (touchstart, preHandler、虚假);
that.drawBegin(事件)
})
this.canvas。addEventListener (touchend,函数(事件){
文档。addEventListener (touchend, preHandler、虚假);
that.drawEnd ()
})
this.clear (btn)
}
drawBegin (e) {
var=这个;
window.getSelection () ?.removeAllRanges window.getSelection () (): 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函数(){
that.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。恩迪=e.changedTouches [0]。clientY——this.stage_info.top
this.cxt.stroke ()
}
drawEnd () {
文档。removeEventListener (touchstart, preHandler、虚假);
文档。removeEventListener (touchend, preHandler、虚假);
文档。removeEventListener (touchmove, preHandler、虚假);//画布。ontouchmove=画布。ontouchend=零
}
明确(btn) {
this.cxt。clearRect (0, 0, 300, 600)
}
save () {
返回canvas.toDataURL(“图像/png”)
}
}
出口默认{
数据(){
返回{
味精:“欢迎来到你的Vue。js应用”,
瓦尔:没错,
url:”“
}
},
安装(){=new画(“画布”);
draw.init ();
},
方法:{
明确:函数(){
draw.clear ();
},
保存:函数(){
var data=draw.save ();
这一点。url=数据;
console.log(数据)
},
变异(词){
这一点。美元发出(“输入”,词);
},
}
}>
<风格范围>
h2、h3 {
粗细:正常;
}
ul {
list-style-type:没有;
填充:0;
}
李{
显示:inline-block;
保证金:0 10 px;
}
一个{
颜色:# 42 b983;
}
#帆布{
背景:粉色;
光标:违约;
}
# keyword-box {
保证金:10 px 0;
}
这篇文章将为大家详细讲解有关Vue怎么利用帆布实现移动端手写板,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
具体如下:
vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。
关于“vue怎么利用帆布实现移动端手写板”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
