demand
Users need to sign or sign in the APP or applet by hand
use
-
You can directly copy the following code to use, just need to adjust the CSS style according to the needs, all the code difficulties have been commented, easy to understand
-
Method using the uView framework, if you want to know how to use can click to go to — [uView framework]
Effect of picture
implementation
-
Encapsulating component calls (recommended), which is what the current tutorial is all about
-
Use the page directly, if you need to understand the use can click to go to — [direct use version]
use
1.components
Create a directorysignature.vue
<template> <view class="signature-box"> <! <view class="signature" v-show="showCanvas"> <canvas class=" myCanvas "canvas-id=" myCanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas> <view class="footer"> <u-button @click="finish" type="primary" :plain="true" :ripple="true" ripple-bg-color="#909399"> Save </u-button> <u-button @click="clear" type="warning" :plain="true" :ripple="true" ripple-bg-color="#909399"> </u-button> <u-button @click="close" type="error" :plain="true" :ripple="true" ripple-bg-color="#909399"> </u-button> </view> </view> <! <view v-show="SignatureImg" class="SignatureImg"><image: SRC ="SignatureImg" mode=""></ view> <! <u-button v-show="SignatureImg" @click="obliterate" type="error" :plain="true" :ripple="true" Ripple -bg-color="#909399" size="medium"> </u-button> </view> </template>Copy the code
2. Define the componentscript
<script> var x = 20; var y = 20; Export default {data() {return {// draw image CTX: ", // points: [], // sign image SignatureImg: "}; }, props: ['showCanvas'], methods: {// Obliterate () {if (this.signatureimg) {this.signatureimg = "; } this.close(); }, // close and empty the canvas close() {this.$emit('closeCanvas'); this.clear(); }, // Create and display the canvas createCanvas() {this.ctx = uni.createcanvasContext (' myCanvas ', this); // Create a drawing object // Set the brush style this.ctx.linewidth = 4; this.ctx.lineCap = 'round'; this.ctx.lineJoin = 'round'; }, // touchstart(e) {let startX = e.touches [0].touches; let startY = e.changedTouches[0].y; let startPoint = { X: startX, Y: startY }; this.points.push(startPoint); // Each touch starts to open a new path this.ctx.beginPath(); }, // touchmove(e) {let moveX = e.touches [0].touches; let moveY = e.changedTouches[0].y; let movePoint = { X: moveX, Y: moveY }; this.points.push(movePoint); Let len = this.points.length; if (len >= 2) { this.draw(); Touchend () {this.points = []; touchend() {this.points = []; }, // draw the handwriting draw() {let point1 = this.points[0]; let point2 = this.points[1]; this.points.shift(); this.ctx.moveTo(point1.X, point1.Y); this.ctx.lineTo(point2.X, point2.Y); this.ctx.stroke(); this.ctx.draw(true); }, // clear the canvas clear() {let that = this; uni.getSystemInfo({ success: function(res) { let canvasw = res.windowWidth; let canvash = res.windowHeight; that.ctx.clearRect(0, 0, canvasw, canvash); that.ctx.draw(true); }}); }, // Finish the painting and save it locally. Finish () {let that = this; uni.canvasToTempFilePath( { canvasId: 'mycanvas', success: function(res) { console.log(res); that.SignatureImg = res.tempFilePath; that.$emit('closeCanvas'); that.close(); } }, this ); } }, mounted() { this.createCanvas(); }}; </script>Copy the code
3. Define the componentstyle
It can be adjusted according to the actual development requirements
<style lang="less" scoped> .signature-box { display: flex; flex-direction: column; align-items: center; background: #fff; Signature {position: fixed; top: 10px; left: 2%; z-index: 999; width: 96%; //canvas .mycanvas { width: 100%; height: calc(100vh - 200upx); background-color: #ececec; } // The bottom button. Footer {font-size: 14px; height: 150upx; display: flex; justify-content: space-around; align-items: center; SignatureImg {image {width: 750rpx; height: 750rpx; } } } </style>Copy the code
4. Use the page to import and register, such ashome.vue
<template>
<signature :showCanvas="showCanvas" @closeCanvas="closeCanvas"></signature>
</template>
<script>
import signature from '@/components/signature.vue';
export default {
components: {
signature
}
}
</script>
Copy the code
5.home.vue
Complete page code
<template> <view> <signature :showCanvas="showCanvas" @closeCanvas="closeCanvas"></signature> </view> </template> <script> import signature from '@/components/signature.vue'; Export default {data() {return {// Open canvas to draw signature showCanvas: false, // whether to show action menu actionSheetShow: false}; }, components: {signature}, methods: {// Hide canvas signature component closeCanvas() {this.showCanvas = false; }}}; </script>Copy the code