<template> <view class="autograph-wrap"> <!-- <view class="handRight"> <view class="handTitle">手写板</view> </view> <view class="handBtn"> <view class="slide-wrapper"> <text>选择粗细</text> <slider @change="updateValue" value="50" show-value class="slider" step="25" /> </view> <view class="color"> <text>选择颜色</text> <image @click="selectColorEvent('black')" :src="selectColor === 'black' ? require('./img/color_black_selected.png') : require('./img/color_black.png')" :class="selectColor === 'black' ? 'color_select' : ''" class="black-select"></image> <image @click="selectColorEvent('red')" :src="selectColor === 'red' ? require('./img/color_red_selected.png') : require('./img/color_red.png') " :class="selectColor === 'red' ? 'color_select' : ''" class="red-select" ></image> </view> </view> --> <view class="handCenter"> <canvas class="handWriting" disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove" @touchend="uploadScaleEnd" :id="canvasId" :canvas-id="canvasId"></canvas> </view> <!-- <view class="showimg"> <image v-if="showimg" :src="showimg" mode=""></image> <text v-else >图片展示</text> </view> --> <view class="buttons"> <!-- <button @click="retDraw" class="delBtn">重写</button> --> <u-button size="mini" @click="retDraw" class="delBtn">重写</u-button> <!-- <button @click="subCanvas" class="subBtn">保存</button> --> </view> </view> </template> <script> import Handwriting from './js/signature.js' import { saveImgToAliOss } from '@/libs/tools.js' export default { props: { // 签字画布id canvasId: { type: String, default: '' }, }, data(){ return{ lineColor:'black', slideValue:50, handwriting:'', selectColor:'black', color:'', showimg:'', share_popup:false, isEmpty: true } }, mounted() { this.handwriting = new Handwriting({ lineColor: this.lineColor, slideValue: this.slideValue, // 0, 25, 50, 75, 100 canvasName: this.canvasId, }) }, methods:{ // 选择画笔颜色 selectColorEvent(event) { this.selectColor = event if(event=='black'){ this.color= '#1A1A1A' }else if(event=='red'){ this.color= '#ca262a' } this.handwriting.selectColorEvent(this.color) }, // 重写 retDraw() { this.handwriting.retDraw() this.isEmpty = true }, // 笔迹粗细滑块 updateValue(e) { this.slideValue = e.detail.value this.handwriting.selectSlideValue(this.slideValue) }, // 绑定到canvas的touchstart事件 uploadScaleStart(event){ this.handwriting.uploadScaleStart(event) }, // 绑定到canvas的touchmove事件 uploadScaleMove(event){ this.handwriting.uploadScaleMove(event) }, // 绑定到canvas的uploadScaleEnd事件 uploadScaleEnd(event){ this.handwriting.uploadScaleEnd(event) this.isEmpty = false }, // 保存 生成图片 subCanvas(){ const _this = this this.handwriting.saveCanvas().then(res=>{ this.showimg = res console.log(res) saveImgToAliOss(res, function(ret) { console.log(ret,'-----阿里云') _this.$emit('generatePictures', ret) }) }).catch(err=>{ console.log(err) }) }, } } </script> <style lang="scss" scoped> .autograph-wrap { width: 100%; height: 100%; overflow: hidden; display: flex; align-content: center; flex-direction: column; justify-content: center; font-size: 28upx; .handRight { align-items: center; .handTitle { flex: 1; color: #666; justify-content: center; font-size: 30upx; } } .handBtn { flex-direction: column; padding: 40upx 20upx; .slide-wrapper { align-items: center; margin-bottom: 20upx; .slider{ width: 400upx; padding-left: 20upx; } } .color{ align-items: center; text{ margin-right: 20upx; } .black-select, .red-select { width: 60upx; height: 60upx; vertical-align: super; } .black-select.color_select, .red-select.color_select { width: 90upx; height: 90upx; vertical-align: sub; } } } .handCenter { border: 4upx dashed #e9e9e9; flex: 5; overflow: hidden; box-sizing: border-box; width: 90%; margin: 0 auto; .handWriting { background: #fff; width: 100%; height: 300upx; } } .showimg{ border: 4upx solid #e9e9e9; overflow: hidden; width: 90%; margin: 0 auto; background: #eee; height: 350upx; margin-top: 40upx; align-items: center; justify-content: center; image{ width: 100%; height: 100%; } text{ font-size: 40upx; color: #888; } } .buttons{ margin: 20upx 5%; text-align: right; .delBtn { color: #666; } .subBtn { background: #008ef6; color: #fff; text-align: center; justify-content: center; } } } .drop { width: 50upx; height: 50upx; border-radius: 50%; background: #FFF; position: absolute; left: 0upx; top: -10upx; box-shadow: 0px 1px 5px #888888; } .slide { width: 250upx; height: 30upx; } </style>