Applet for electronic signatures ([email protected])

Business need to implement electronic signature functions, currently I'm using wepy framework.

html

<template>
    <view class="wrap">
        <view class="content-wrap" id="content">
            <canvas class='myCanvas' canvas-id="myCanvas" @touchmove='move' @touchstart='start' @touchend='end' @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'></canvas>
        </view>
        <view class="bottom-wrap">
            <view class="delete-btn" @tap="clearClick">清除</view>
            <view class="paint-brush">
                <view class="thickness">
                    <repeat for="{{thicknessArr}}" index="index" item="item">
                        <text class="{{item}} {{activeIndex == index ? 'active':''}}" @tap="thicknessChange({{item}}, {{index}})"></text>
                    </repeat>
                </view>
                <view class="paint-color">
                    <repeat for="{{paintColorArr}}" index="index" item="item">
                        <text class="{{item.className}}" @tap="selectColor({{item.color}})"></text>
                    </repeat>
                </view>
                <view class="done" @tap="saveClick">完成</view>
            </view>
        </view>
    </view>
</template>

less

page {
    width: 100%;
    height: 100%;
    background: #fff;
}

.wrap {
    width: 100%;
    height: 100%;
    border-top: 1px solid #d5d5d5;
    box-sizing: border-box;
}

.content-wrap {
    width: 100%;
    height: calc(100% - 84rpx);
    .myCanvas {
        width: 100%;
        height: 100%;
    }
}

.bottom-wrap {
    width: 100%;
    height: 80rpx;
    overflow: hidden;
    color: #333;
    border-top: 1px solid #0068b1;
    .delete-btn {
        float: left;
        height: 80rpx;
        line-height: 80rpx;
        padding: 0 15rpx;
        font-size: 28rpx;
    }
    .paint-brush {
        float: right;
        height: 80rpx;
        line-height: 80rpx;
        overflow: hidden;
        .thickness {
            float: left;
            height: 80rpx;
            line-height: 80rpx;
            margin-right: 25rpx;
            text {
                display: inline-block;
                border: 1px solid #333;
                border-radius: 50%;
                margin: 0 15rpx;
                vertical-align: middle;
            }
            .small {
                width: 14rpx;
                height: 14rpx;
            }
            .medium {
                width: 22rpx;
                height: 22rpx;
            }
            .large {
                width: 30rpx;
                height: 30rpx;
            }
            .active {
                background: blue;
            }
        }
        .paint-color {
            float: left;
            text {
                display: inline-block;
                width: 54rpx;
                height: 54rpx;
                border-radius: 12rpx;
                margin: 12rpx 15rpx;
            }
            .red {
                background: red;
            }
            .blue {
                background: blue;
            }
            .black {
                background: #333;
            }
        }
        .done {
            float: left;
            height: 80rpx;
            line-height: 80rpx;
            padding: 0 15rpx;
            font-size: 28rpx;
        }
    }
}

ts

wepy from Import 'wepy' ; 
Import {Connect} from 'wepy-Redux' ; 
Import uploadSignature} from { '@ / Store / Actions / index' ; 

@connect ({ 
    usermeta: (State) => state.globle.userMeta,                     // user data 
    signInfo: (State) => state.seals.signInfo,                      // upload information returned signature 
}, { 
    uploadSignature,                                                // upload signature 
}) 

Export default class ElectronicSignature the extends wepy.page { 

    config = { 
        navigationBarTitleText : 'handwritten signature', 
        PageOrientation: 'Landscape' , // horizontal screen display phone 
    }; 

    Data = { 
        thicknessArr: [ 'Small', 'Medium', 'Large'],                 // brush thickness 
        activeIndex: 0,                                             // brush thickness of the current Key 
        paintColorArr : [                                            @ pen color array 
            {className: 'Red', color: '# FF0000' }, 
            {className: 'Blue', color: '# 0c00ff' }, 
            {className: 'Black', color: '# 000000' },
        ],
        signImage: '',                                               // picture generated address 
        canvasContent: null ,                                         // canvas 
        canvasw: 0,                                                  // canvas width 
        canvash: 0,                                                  // canvas high 
        touchs: [],                                                  // all coordinate positions 
    }; 

    Methods = { 
        uploadSignature , 
        // canvas touch-trigger 
        start: (Event) => {
             // Get the touch-x, Y 
            the this .touchs.push ({ 
                x: event.changedTouches [ 0 ] .x, 
                Y: event.changedTouches [ 0 ] .y, 
            }); 
        }, 
        // the canvas in response to a touch gesture movement 
        move : (Event) => {
             the this .touchs.push ({ 
                X: event.touches [ 0 ] .x, 
                Y: event.touches [ 0 ] .y, 
            }); 
            IF ( the this .touchs.length> = 2 ) {
                 the this .methods.draw ( the this .touchs); 
            }
        },
        draw: (touchs) => {
            const point1 = touchs[0];
            const point2 = touchs[1];
            touchs.shift();
            this.canvasContent.moveTo(point1.x, point1.y);
            this.canvasContent.lineTo(point2.x, point2.y);
            this.canvasContent.stroke();
            this.canvasContent.draw(true);
        },
        // 选择笔的粗细
        thicknessChange: (type, index) => {
            this.activeIndex = index;
            this.methods.clearClick();  // 清除画布
            switch (type) {
                case 'small':
                    this.canvasContent.setLineWidth(2);
                    break;
                case 'medium':
                    this.canvasContent.setLineWidth(4);
                    break;
                case 'large':
                    this.canvasContent.setLineWidth(6);
                    break;
            }
        },
        // 选择画笔颜色
        selectColor: (Color) => {
            this .methods.clearClick ();   // Clear canvas 
            the this .canvasContent.setStrokeStyle (Color); 
        }, 
        clearClick: () => {
             // Clear the canvas 
            the this .canvasContent.clearRect (0, 0 , the this .canvasw, the this .canvash);
             the this .canvasContent.draw ( to true ); 
        }, 
        the async saveClick () { 
            wepy.showLoading ({title: 'uploading ...' });
             // the specified current canvas area the content generated by the export of specified size picture 
            imgResult the await wepy.canvasToTempFilePath = const ({canvasId: 'myCanvas' });
            const imgPath = imgResult.tempFilePath;
            // 获取生成的图片大小
            const fileInfo = await wepy.getFileInfo({ filePath: imgPath });
            const imgSize = fileInfo.size;
            // 上传
            this.methods.uploadSignature({
                path: imgPath,
                keyName: 'signature_file',
                params: { fileLength: imgSize, userId: this.userMeta.uuid },
            });
        },
        backPrevPage: () =>  {
            wepy.navigateBack({
                Delta: . 1 , 
            }); 
        }, 
        // canvas touch cancel response 
        Cancel: (Event) => {
             // the console.log ( 'touch Cancel' + Event); 
        },
         // canvas in response to a long press gesture 
        TAP: (Event) => {
             // the console.log ( 'long press gesture' + Event); 
        }, 
        error: (Event) => {
             // the console.log ( 'error canvas touch' + Event); 
        },
         // canvas in response to touch gesture moving end 
        end: (Event) => {
             // Clear trace array 
            for(const Item of the this .touchs) {
                 the this .touchs.pop (); 
            } 
        }, 
    }; 

    the onLoad () { 
        // get context Canvas 
        the this .canvasContent = wepy.createCanvasContext ( 'myCanvas' );
         // the console.log (this.canvasContent); 
        // set the color of 
        this .canvasContent.setStrokeStyle ( '# 000000' );
         // Sets the line width of 
        this .canvasContent.setLineWidth (2 );
         // Sets the line cap style more rounded ends 
        this .canvasContent.setLineCap ( 'round' );
         // set two lines are connected at a more mellow
         this.canvasContent.setLineJoin ( 'round' );
         // Get the width and height canvas 
        const = Self the this ; 
        const Query = wx.createSelectorQuery (); 
        query.select ( . '#content') boundingClientRect (RES => { 
          self.canvasw = res.width; 
          self.canvash = res.height; 
        .}) Exec (); 
    } 

    Watch = { 
        signInfo (Val) { 
            Val && wepy.showToast ({title:, icon: 'success' 'signature successfully saved!' } ); 
        } 
    }; 
}