【uniapp 開發】手繪簽名組件

• 代碼以下：

<template>
    <view class="content">
        <button type="primary" @tap="doss">點擊簽名1</button>
        <button type="primary" @tap="doss2">點擊簽名2</button>
        
        <view class="imgs">
            <image class="img" :src="img1" mode="widthFix"></image>
            <image class="img" :src="img2" mode="widthFix"></image>
        </view>
        
        <catSignature canvasId="canvas1"  @close="close" @save="save" :visible="isShow" />
        <catSignature canvasId="canvas2" @close="close2" @save="save2" :visible="isShow2" />
        
        
    </view>
</template>

<script>
    import catSignature from "@/components/cat-signature/cat-signature.vue"
    export default {
        components:{catSignature},
        data() {
            return {
                img1:'',
                img2:'',
                isShow:false,
                isShow2:false,
            }
        },
        onLoad() {

        },
        methods: {
            doss(){
                this.isShow = true;
            },
            close(){
                this.isShow = false;
            },
            save(val){
                this.isShow = false;
                this.img1 = val
            },
            doss2(){
                this.isShow2 = true;
            },
            close2(){
                this.isShow2 = false;
            },
            save2(val){
                this.isShow2 = false;
                this.img2 = val
            },
        }
    }
</script>

<style>
    .imgs{width: 500upx;height: 500upx;display: flex;margin: 0 auto;flex-wrap: wrap;}
    .imgs img{width: 100%; height: 100%;}
</style>

• 插件代碼：

<template>
    <view v-if="visibleSync" class="cat-signature" :class="{'visible':show}" @touchmove.stop.prevent="moveHandle">
        <view class="mask" @tap="close" />
        <view class="content">
            <canvas class='firstCanvas' :canvas-id="canvasId" @touchmove='move' @touchstart='start($event)' @touchend='end'
             @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error' />
            <view class="btns">
                <view class="btn" @tap="clear">清除</view>
                <view class="btn" @tap="save">保存</view>
            </view>
        </view>
    </view>
</template>

<script>
    var content = null;
    var touchs = [];
    var canvasw = 0;
    var canvash = 0;
    //獲取系統信息
    uni.getSystemInfo({
        success: function(res) {
            canvasw = res.windowWidth;
            canvash = canvasw * 9 / 16;
        },
    })
    export default{
        name:'cat-signature',
        props:{
            visible: {
                type: Boolean,
                default: false
            },
            canvasId:{
                type: String,
                default: 'firstCanvas'
            }
        },
        data(){
            return{
                show:false,
                visibleSync: false,
                signImage:'',
                hasDh:false,
            }
        },
        watch:{
            visible(val) {
                this.visibleSync = val;
                this.show = val;
                this.getInfo()
            }
        },
        
        created(options) {
            this.visibleSync = this.visible
            this.getInfo()
            setTimeout(() => {
                this.show = this.visible;
            }, 100)
        },
        methods:{
            getInfo(){
                //得到Canvas的上下文
                content = uni.createCanvasContext(this.canvasId,this)
                //設置線的顏色
                content.setStrokeStyle("#000")
                //設置線的寬度
                content.setLineWidth(5)
                //設置線兩端端點樣式更加圓潤
                content.setLineCap('round')
                //設置兩條線鏈接處更加圓潤
                content.setLineJoin('round')
            },
            // 
            close() {
                this.show = false;
                this.hasDh = false;
                this.$emit('close')
            },
            moveHandle(){
                
            },
            // 畫布的觸摸移動開始手勢響應
            start(e){
                let point = {
                    x: e.touches[0].x,
                    y: e.touches[0].y,
                }
                touchs.push(point);
                this.hasDh = true
            },
            // 畫布的觸摸移動手勢響應
            move: function(e) {
                let point = {
                    x: e.touches[0].x,
                    y: e.touches[0].y
                }
                touchs.push(point)
                if (touchs.length >= 2) {
                    this.draw(touchs)
                }
            },
            
            // 畫布的觸摸移動結束手勢響應
            end: function(e) {
                //清空軌跡數組
                for (let i = 0; i < touchs.length; i++) {
                    touchs.pop()
                }
            
            },
            
            // 畫布的觸摸取消響應
            cancel: function(e) {
                // console.log("觸摸取消" + e)
            },
            
            // 畫布的長按手勢響應
            tap: function(e) {
                // console.log("長按手勢" + e)
            },
            
            error: function(e) {
                // console.log("畫布觸摸錯誤" + e)
            },
            
            //繪製
            draw: function(touchs) {
                let point1 = touchs[0]
                let point2 = touchs[1]
                // console.log(JSON.stringify(touchs))
                content.moveTo(point1.x, point1.y)
                content.lineTo(point2.x, point2.y)
                content.stroke()
                content.draw(true);
                touchs.shift()
                
            },
            //清除操做
            clear: function() {
                //清除畫布
                content.clearRect(0, 0, canvasw, canvash)
                content.draw(true)
                // this.close()
                this.hasDh = false;
                this.$emit('clear')
            },
            save(){
                var that = this;
                if(!this.hasDh){
                    uni.showToast({title:'請先簽字',icon:'none'})
                    return;
                }
                uni.showLoading({title:'生成中...',mask:true})
                setTimeout(()=>{
                    uni.canvasToTempFilePath({
                        canvasId: this.canvasId,
                        success: function(res) {
                            that.signImage = res.tempFilePath;
                            that.$emit('save',res.tempFilePath);
                            uni.hideLoading()
                            that.hasDh = false;
                            that.show = false;
                        },
                        fail:function(err){
                            console.log(err)
                            uni.hideLoading()
                        }
                    },this)
                },100)
            }
        }
    }
</script>

<style lang="scss">
    .cat-signature.visible {
        visibility: visible
    }
    .cat-signature{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        z-index: 11;
        height: 100vh;
        visibility: hidden;
        .mask{display: block;opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4);transition: opacity .3s;}
        .content{display: block;position: absolute;top: 0;left: 0;bottom:0;right: 0;margin: auto; width:94%;height: 500upx;background: #fff;border-radius: 8upx;box-shadow: 0px 3px 3px #333;
            // canvas
            .firstCanvas {background-color: #fff;width: 100%;height: 400upx;}
            // canvas
            
            .btns{padding: 0 15px;height: 100upx;overflow: hidden; position: absolute;bottom: 10upx;left: 0;right: 0;margin: auto;display: flex;justify-content: space-between;
                .btn{width: 40%;text-align: center;font-size: 28upx;height:60upx;line-height: 60upx;background-color: #999;color: #fff;border-radius: 6upx;}
            }
        }
    }
    
    .visible .mask {
        display: block;
        opacity: 1
    }
</style>