更新记录

1.0.0（2021-03-25） 下载此版本

能够同时兼容竖屏和横屏的电子签名开发需求

平台兼容性

uni-app

e-signature 电子签名

• 作者：***@163.com
• 邮箱：***@163.com

功能概述

• 1、该插件参考了上的小程序canvas手写板和插件市场里的电子签名，并进行部分修改；
• 2、核心文件是e-signature.js,适用于竖屏和横屏模式，横屏模式使用两个canvas是为了要把所生成的图片转正；
• 3、给大家分享出来，如有不足之处还请见谅，同时也欢迎指证，我在此先谢过啦

使用说明

代码示例

  (提示：该示例的UI还有视图只做了微信小程序兼容测试，其他的请看自己的需求进行改动)
  <template>
    <view >
        <view class="hand-canvas" :style="'height: '+canvas_height+'px;'">
            <canvas class="hand-canvas__writing" 
                disable-scroll="true" 
                @touchstart="uploadScaleStart" 
                @touchmove="uploadScaleMove"
                @touchend="uploadScaleEnd"  
                canvas-id="handWriting">
            </canvas>

            <canvas class="hand-canvas__shadow" :style="'width: '+canvas_height+'px;'"
                canvas-id="handWritingShadow">
            </canvas>
        </view>
        <view class="btn-box">
            <view @tap="retDraw" class=" btn-box__btn btn-box__btn--del">擦除</view>
            <view @tap="subCanvas" class="btn-box__btn btn-box__btn--sub">签名</view>

        </view>

          <image :src="img_src" mode=""></image>
    </view>
  </template>

  <script>
      import Handwriting from "../../static/js/e-signature.js"

      let that = ''

    export default {
        data() {
            return {
                handwriting: '',
                canvas_height: 0,
                img_src: ''
            }
        },
        onLoad() {
              that = this

              that.initHeight()
        },
        methods: {
              initHeight: () => {
                let canvas_height = 0
                uni.getSystemInfo({
                    success(res) {
                        let phoneHeight = res.windowHeight;
                        console.log(res.windowHeight);
                        // 计算画布的高度和宽度
                        let view = uni.createSelectorQuery().select('.hand-canvas__writing');
                        view.boundingClientRect(data => {
                            console.log(data);
                            let top = data.top;
                            canvas_height = phoneHeight - top -100;
                            console.log( `到顶部的距离===${data.top}`);
                            that.canvas_height = canvas_height

                              /**
                               *  初始化需传入三个参数 
                               lineColor：  字体颜色 默认#1A1A1A 
                               slideValue： 字体粗细 默认50（内置 0，25，50, 75, 100 5档粗细）
                               canvasName： canvas的ID名 canvas-id
                               signaturePattern： 设置签名模式是横屏，还是竖屏 默认landscape（内置landscape、portrait）
                               canvasNameShadow：横屏时需要设置第二横屏canvas的ID名
                               canvasHeight： canvas的高度
                               canvasWidth: canvas的宽度*/
                            that.handwriting = new Handwriting({
                                lineColor: 'black',
                                slideValue: '50', // 0, 25, 50, 75, 100
                                canvasName: 'handWriting',
                                  signaturePattern: 'portrait',//landscape:横屏；portrait：竖屏；
                                canvasNameShadow: 'handWritingShadow',
                                canvasHeight: canvas_height,
                                  canvasWidth: data.width
                            })

                            // 内置函数
                            //that.handwriting.selectColorEvent(color);   // 传入颜色参数 改变字体颜色
                            //that.handwriting.selectSlideValue(slideValue);  // 传入粗细参数 0,25,50,75,100 改变字体粗细
                        }).exec();
                    }
                });

              },
              retDraw() {
                that.handwriting.retDraw()
              },
              uploadScaleStart(event) {
                //绑定到canvas的touchstart事件
                that.handwriting.uploadScaleStart(event)
              },
              uploadScaleMove(event) {
                //绑定到canvas的touchmove事件
                that.handwriting.uploadScaleMove(event)
              },
              uploadScaleEnd(event) {
                //绑定到canvas的uploadScaleEnd事件
                that.handwriting.uploadScaleEnd(event)
              },
              subCanvas() {
                that.handwriting.saveCanvas().then(res => {

                    that.img_src = res
                }).catch(err => {
                    console.log(err);
                });

              },
        }
    }
  </script>