demand

Users need to sign or sign in the APP or applet by hand

use

  1. 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

  2. Method using the uView framework, if you want to know how to use can click to go to — [uView framework]

Effect of picture

implementation

  1. Encapsulating component calls (recommended), which is what the current tutorial is all about

  2. Use the page directly, if you need to understand the use can click to go to — [direct use version]

use

1.componentsCreate 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.vueComplete 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