canvas实现手写板（vue）

<template><div class="signature"><!-- 签名 --><div class="canvas"><canvasid="myCanvas"ref="canvas"width="600"height="600"@touchstart="touchStart"@touchmove="touchMove"@touchend="touchEnd"@mousedown="mouseDown"@mousemove="mouseMove"@mouseup="mouseUp">您的浏览器不支持 HTML5 canvas 标签。</canvas></div><divclass="save-btn"@click.stop.prevent="commit">提交签名</div><divclass="back-btn"@click.stop.prevent="routeGo"><i class="icon"></i><span class="label">返回</span></div><divclass="clear-btn"@click.stop.prevent="clear"><i class="icon"></i><span class="label">清空</span></div></div>
</template><script>
export default {data () {return {// canvasWidth: window.innerWidth,// canvasHeight: window.innerHeight,canvasImg: '', // 签名图片地址ctx: null,stage_info: [], // 移动端按下点到屏幕的偏差isDown: false,points: [],startX: 0, // 起始点x坐标startY: 0 // 起始点y坐标}},mounted () {this.init()},methods: {// 初始化画板init () {const canvas = this.$refs.canvasthis.ctx = canvas.getContext('2d')this.ctx.strokeStyle = '#000'this.stage_info = canvas.getBoundingClientRect()},// pcmouseDown (ev) {const e = ev || evente.preventDefault()this.isDown = trueconst obj = {x: e.offsetX,y: e.offsetY}this.startX = obj.xthis.startY = obj.ythis.ctx.beginPath()this.ctx.moveTo(this.startX, this.startY)this.ctx.lineTo(obj.x, obj.y)this.ctx.stroke()this.ctx.closePath()this.points.push(obj)},mouseMove (ev) {const e = ev || evente.preventDefault()if (this.isDown) {const obj = {x: e.offsetX,y: e.offsetY}this.ctx.beginPath()this.ctx.moveTo(this.startX, this.startY)this.ctx.lineTo(obj.x, obj.y)this.ctx.stroke()this.ctx.closePath()this.startY = obj.ythis.startX = obj.xthis.points.push(obj)}},mouseUp (ev) {const e = ev || evente.preventDefault()const obj = {x: ev.offsetX,y: ev.offsetY}this.ctx.beginPath()this.ctx.moveTo(this.startX, this.startY)this.ctx.lineTo(obj.x, obj.y)this.ctx.stroke()this.ctx.closePath()this.points.push(obj)this.points.push({x: -1,y: -1})this.isDown = false},// mobiletouchStart (ev) {const e = ev || evente.preventDefault()if (e.touches.length === 1) {const obj = {x: e.targetTouches[0].clientX - this.stage_info.left,y: e.targetTouches[0].clientY - this.stage_info.top}this.startX = obj.xthis.startY = obj.ythis.ctx.beginPath()this.ctx.moveTo(this.startX, this.startY)this.ctx.lineTo(obj.x, obj.y)this.ctx.stroke()this.ctx.closePath()this.points.push(obj)}},touchMove (ev) {const e = ev || evente.preventDefault()if (e.touches.length === 1) {const obj = {x: e.targetTouches[0].clientX - this.stage_info.left,y: e.targetTouches[0].clientY - this.stage_info.top}this.ctx.beginPath()this.ctx.moveTo(this.startX, this.startY)this.ctx.lineTo(obj.x, obj.y)this.ctx.stroke()this.ctx.closePath()this.startX = obj.xthis.startY = obj.ythis.points.push(obj)}},touchEnd (ev) {const e = ev || evente.preventDefault()if (e.touches.length === 1) {const obj = {x: e.targetTouches[0].clientX - this.stage_info.left,y: e.targetTouches[0].clientY - this.stage_info.top}this.startX = obj.xthis.startY = obj.ythis.ctx.beginPath()this.ctx.moveTo(this.startX, this.startY)this.ctx.lineTo(obj.x, obj.y)this.ctx.stroke()this.ctx.closePath()this.points.push(obj)}},// 返回routeGo () {this.$router.go(-1)},clear () {this.ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)this.points = []},commit () {this.canvasImg = this.$refs.canvas.toDataURL()console.log(this.canvasImg)}}
}
</script><style lang="less">.signature {/*min-height: 100vh;*/background: #fff;position: relative;.canvas {font-size: 0;}.save-btn {position: absolute;bottom: 0;left: 50%;z-index: 9;margin-top: -20px;/*transform: rotate(90deg);*/transform-origin: center center;font-size: 18px;color: #fcfcfc;line-height: 25px;padding: 8px 43px;background: linear-gradient(90deg,rgba(57, 115, 230, 1) 0%,rgba(57, 115, 230, 1) 100%);border-radius: 2px;}.back-btn {position: absolute;top: 20px;left: 50px;z-index: 9;transform-origin: left top;display: flex;flex-direction: column;.icon {display: inline-block;width: 42px;height: 42px;/*background: url("../../assets/images/signature_back.png") no-repeat center*//*center;*/background-size: contain;}.label {font-size: 16px;color: #d8d8d8;text-align: center;}}.clear-btn {position: absolute;top: 20px;right: 50px;z-index: 9;transform-origin: left top;display: flex;flex-direction: column;.icon {display: inline-block;width: 42px;height: 42px;/*background: url("../../assets/images/signature_clear.png") no-repeat*//*center center;*/background-size: contain;}.label {font-size: 16px;color: #d8d8d8;text-align: center;}}}
</style>

canvas实现手写板（vue）相关推荐

移动端html5手写板,Vue+canvas实现移动端手写板步骤详解
这次给大家带来Vue+canvas实现移动端手写板步骤详解,Vue+canvas实现移动端手写板的注意事项有哪些,下面就是实战案例,一起来看一下. 清除保存 Canvas画板 var draw; v ...
移动端html5手写板,Vue利用canvas实现移动端手写板的方法
清除保存 Canvas画板 var draw; var preHandler = function(e){e.preventDefault();} class Draw { constructor( ...
android canvas 手写,自定义view—Canvas实现手写板和涂鸦功能
学习导航第一节:http://blog..net/bobo8945510/article/details/53197727 -自定义View-自定义属性及引用第二节:http://blog..ne ...
前端利用canvas实现手写板
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
用canvas实现一个vue弹幕组件
看B站时,对弹幕的实现产生了兴趣,一开始想到用css3动画去实现,后来感觉这样性能不是很好,查了下资料,发现可以用canvas实现,于是就摸索着写了一个简单的弹幕. 弹幕功能支持动态添加弹幕弹幕不 ...
VUE项目开发，使用canvas实现图片签名编辑手写板功能
vue项目使用canvas实现手写板功能完整的效果图如下: 直接上代码,下面代码可以当做组件直接引用,根据自己的需求传对应的图片即可,操作图标需要自己替换,保存功能也需要自己实现. CanvasDi ...
vue canvas动效组件插件库制作
vue-canvas-effect canvas动画合集Vue组件 ? online demo | ? English document 内容 [浏览器兼容] [安装] [使用] [ES6] [按需加 ...
2018.7月Vue优质开源项目清单
2018.7月Vue优质开源项目清单 SmallRuralDog/electron-vue-music stars:325 forks:51 项目描述:基于 electron-vue 开发的音乐播放器 ...
vue为什么要求组件模板只能有一个根元素
查看全文 http://www.taodudu.cc/news/show-805357.html 相关文章: 微信小程序一定要用https的理由,小程序使用HTTPS链接分析微信小程序登录 getU ...

canvas实现手写板（vue）

canvas实现手写板（vue）相关推荐

最新文章

热门文章