移动端Canvas手写签名
2018-01-15 10:16
441 查看
效果图
基于vue,可以保存上传
项目地址 vue-signature
实现
1.canvas画图,参考 jrainlau<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.changedTouch 4000 es[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) } } } </script>2.移动端事件监听,参考 [BlandonTsai(http://www.caihaibo.cn/author/blandon)
var preHandler = function(e){e.preventDefault();} document.addEventListener('touchmove', preHandler, false); document.removeEventListener('touchmove', preHandler, false);
遇到的问题
移动端的事件监听作者:Shayne_Wang
链接:https://www.jianshu.com/p/9536d4f4fe6a
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
感谢分享 https://www.jianshu.com/p/9536d4f4fe6a[/code]
相关文章推荐
- canvas手写签名
- canvas 手写功能pc移动端
- canvas画布实现手写签名效果
- 使用websocket实现手机扫描PC端二维码,移动端canvas手绘签名确定后将图片同步到PC端 扫码及时更新图片
- canvas画布实现手写签名效果
- h5 利用canvas手写签名并保存
- 移动端的canvas电子签名
- Html5 canvas 应用于webkit浏览器实现电子签名
- 移动端插件-快速生成tab插件(纯手写+亲测)
- 移动端canvas出现锯齿和文字模糊问题
- android 手写签名、画板(自定义视图)的使用
- canvas移动端常用技巧图片loading
- 【android开发】手写签名系统的设计与实现之实现解析pdf文件(二)
- iOS手写签名生成图片<贝赛尔曲线>
- IOS:手写签名的实现(实现了手势绘制字体,添加文字水印,图片剪切、图片压缩)
- 微信小程序画布手写签名
- 平滑的手写签名View
- 【android开发】手写签名系统的设计与实现之实现手写画板(三)
- 利用canvas实现田字格里写字,并适配移动端
- 对于手写签名生成图片储存和回显的实现