signature

uni-app Canvas手写板(use canvas in weapp for user signature)

参考了GitHub上的小程序canvas手写板,并进行部分修改 小程序Canvas手写板地址:handwriting-weapp 核心文件为static中signature.js

插件

将signature.js 引入页面中

要使用的页面 index.vue


import Handwriting from "../../static/js/signature.js"

使用JS index.js

 : function (options) {
    this.handwriting = new Handwriting({
      lineColor: this.lineColor,
      slideValue: this.slideValue,
      canvasName:'handWriting'
    })
  },

  // 初始化需传入三个参数 
  // lineColor  字体颜色 默认#1A1A1A 
  // slideValue 字体粗细 默认50(内置 0,25,50, 75, 100 5档粗细)
  // canvasName canvas的id名 canvas-id

   //绑定canvas事件  event为canvas事件回调传值
    this.handwriting.uploadScaleStart(event)  绑定到canvas的touchstart事件
    this.handwriting.uploadScaleMove(event)   绑定到canvas的touchmove事件
    this.handwriting.uploadScaleEnd(event)    绑定到canvas的uploadScaleEnd事件

   // 内置函数
   this.handwriting.selectColorEvent(color);   // 传入颜色参数 改变字体颜色
   this.handwriting.selectSlideValue(slideValue);  // 传入粗细参数 0,25,50,75,100 改变字体粗细
   this.handwriting.retDraw() //清楚canvas内容
   this.handwriting.saveCanvas() //生成图片,基于uni-app接口 uni.canvasToTempFilePath(OBJECT) 异步封装,默认未传参,需要传参可自行在signature.js中修改

使用方式

将项目拖入HbuilderX,直接运行即可

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问