更新记录

0.5.2（2022-06-10） 下载此版本

• canvas 默认设置 disable-scroll 属性为true, 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新

0.5.1（2022-05-27） 下载此版本

• 取消属性 width, height 默认值

0.5.0（2022-05-27） 下载此版本

• 新增 v-sgin 组件获取坐标信息数组方法 getLineData
• 新增 v-sign 组件事件触发 @clear, @revoke, @end
• 修复撤销操作重设背景色导致线条消失问题

平台兼容性

uni-app

其他

v-sign 手写签名

如有问题或者建议，欢迎留言或**（：*）！！！将保持维护！！！

快速使用

基础示例，具体说明见下方 API，若需要使用内置子组件，见下方子组件说明。

<template>
    <v-sign :width="winWidth + 'px'" @init="onSignInit"></v-sign>
    <button @click="clear">清空<button>
</template>
<script>
  export default {
    data() {
      return {
        winWidth: 0
      }
    },
    created() {
      // 宽度设为可使用窗口宽度，如果不设宽度，则宽度为 canvas 默认值
      const { windowWidth } = uni.getSystemInfoSync()
      this.winWidth = windowWidth
    },
    methods: {
      onSignInit(signCtx) {
        this.signCtx = signCtx
      },
      // 清空
      clear() {
        this.signCtx.clear()
      }
    }
  }
</script>

API

属性 (Props)

事件（Events）

事件回调参数说明

init(ctx: SignContext)

可以通过该事件回调暴露的 clear、revoke 等方法操作画布。

interface SignContext {
    // canvas 实例
    ctx: object;
    // 清空画布
    clear(): void;
    // 撤回
    revoke(): void;
    // 保存 png 图片，文件名 filename 配置仅支持 h5
    saveImage(filename: string): Promise<object>;
    // 返回图片临时文件路径，config 参数同 uni.canvasToTempFilePath方法，内部只是做了 Promise 化处理而已
    canvasToTempFilePath(config: object): Promise<object>;
    // 设置画布背景色
    setBackgroundColor(color: string): void;
    setLineWidth(value: number): void;
    setLineColor(value: string): void;
    // 获取坐标信息数组
    getLineData(): Array<object>;
}

示例：

<template>
    <v-sign @init="onSignInit"></v-sign>
    <button @click="clear">清空<button>
    <button @click="revoke">撤回<button>
    <button @click="saveTempFilePath">保存临时图片路径<button>
    <button @click="saveImage">保存图片<button>
</template>
<script>
  export default {
    methods: {
      onSignInit(signCtx) {
          this.signCtx = signCtx
      },
      // 清空
      clear() {
          this.signCtx.clear()
      },
      // 撤回
      revoke() {
          this.signCtx.revoke()
      },
      // 保存为临时图片路径，h5返回 base64
      async saveTempFilePath() {
          const res = await this.signCtx.canvasToTempFilePath()
          console.log(res)
      },
      // 保存 png 图片
      saveImage() {
          this.signCtx.saveImage()
      }
    }
  }
</script>

子组件

子组件需要包裹在 v-sign 组件内使用！！！

按钮控件（v-sign-action）

示例

<template>
  <v-sign>
    <v-sign-action @save="save" @clear="clear" @prev="revoke"></v-sign-action>
  </v-sign>
</template>
<script>
  export default {
    methods: {
      save(tempFilePath) {
        console.log(tempFilePath);
      },
    },
  };
</script>

API

属性 (Props)

事件（Events）

点击对应类型按钮触发对应事件， 例如：配置了清空（clear）按钮，点击则触发 clear 事件。

画笔组件（v-sign-pen）

示例

<template>
  <v-sign>
    <v-sign-pen></v-sign-pen>
  </v-sign>
</template>
<script>
  export default {};
</script>

API

属性 (Props)

事件（Events）

颜色选择器组件（v-sign-color）

示例

<template>
  <v-sign>
    <v-sign-color></v-sign-color>
  </v-sign>
</template>
<script>
  export default {};
</script>

API

属性 (Props)

事件（Events）