更新记录

1.0.1（2025-09-24） 下载此版本

修复已知BUG

1.0.0（2025-09-18） 下载此版本

## [1.0.0] - 2025-09-17
### Added
-   初次发布。
-   实现核心手写绘制功能。
-   支持自定义画笔属性（颜色、粗细）。
-   实现撤销、重做、清除功能。
-   实现签名图片导出（PNG/JPEG）。
-   添加画布空白状态检测。
-   提供丰富的配置选项和事件回调。
-   支持作用域插槽自定义底部栏。

平台兼容性

uni-app(3.6.5)

uni-app x(3.6.5)

其他

hy-signature-pad 增强型签名板

一个功能丰富、高性能的 uni-app 手写签名组件。

特性

• ✍️ 流畅书写: 基于 Canvas 实现，支持触摸和鼠标绘制。
• 🎨 高度自定义: 可自定义画笔颜色、粗细、平滑度、画布背景、网格线。
• ⏪ 撤销重做: 支持多次撤销和重做操作。
• 💾 导出多样: 支持导出为 PNG、JPEG 等多种格式的图片。
• ✅ 智能验证: 可检测签名是否为空，防止无效提交。
• 🌐 多端兼容: 适配 App、H5、各大小程序平台。
• 🔒 无权限依赖: 纯前端组件，不涉及任何敏感权限。

安装

通过 HBuilderX 的 uni_modules 导入本插件，或手动将本插件放入你项目的 uni_modules 目录下。

使用方法

基本使用

<template>
  <view>
    <hy-signature-pad
      ref="signaturePad"
      :canvas-width="400"
      :canvas-height="300"
      pen-color="#000000"
      :pen-size="3"
      :require-sign="true"
      @export="onExportSignature"
      @clear="onClear"
    ></hy-signature-pad>
    <view class="custom-buttons">
      <button @click="clearSignature">清除</button>
      <button @click="saveSignature">保存签名</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    onExportSignature(result) {
      console.log('签名导出成功:', result);
      // result 包含 { type, data, width, height }
      // 可以将 result.data (Base64或临时路径) 上传服务器或展示
      uni.previewImage({
        urls: [result.data],
        success: () => {
          console.log('预览图片成功');
        }
      });
    },
    onClear() {
      console.log('画布已清除');
    },
    clearSignature() {
      this.$refs.signaturePad.clear();
    },
    saveSignature() {
      this.$refs.signaturePad.exportSignature();
    }
  }
};
</script>

配置属性 (Props)

属性                      类型               默认值                  说明
width                   String, Number  '100%'                组件容器宽度
height                  String, Number  '400rpx'              组件容器高度
canvas-width            Number           300                  Canvas 实际像素宽度 (重要！)
canvas-height           Number           200                  Canvas 实际像素高度 (重要！)
pen-color               String           '#000000'            初始画笔颜色
pen-size                Number           4                    初始画笔粗细 (像素)
max-pen-size            Number           20                   最大画笔粗细
min-pen-size            Number           1                    最小画笔粗细
smoothness              Number           0.7                  线条平滑度 (0-1)
background-color        String           '#FFFFFF'            画布背景色
show-grid               Boolean          false                是否显示辅助网格线
grid-color              String           'rgba(0,0,0,0.05)'   网格线颜色
placeholder-text        String           '请在此处签名'         空白时提示文字
confirm-text            String           '确认签名'           确认按钮文字
hide-controls           Boolean          false                是否隐藏内置控制栏
require-sign            Boolean          true                 是否要求必须签名后才能确认导出
enable-custom-color     Boolean          true                 是否启用自定义颜色选择
enable-brush-size       Boolean          true                 是否启用画笔粗细滑块
preset-colors           Array            ['#000', ...]        预设颜色数组
export-quality          Number           0.92                 导出图片质量 (JPEG)
export-type             String           'image/png'          导出图片类型 ('image/png', 'image/jpeg')
...                                                           其他自定义图标属性请参考文档

事件 (Events)

事件名         说明                          回调参数
@export         导出签名成功时触发           { type, data, width, height }
@export-error   导出签名失败时触发           Error 对象
@clear          清除画布时触发             -
@color-change   画笔颜色变化时触发           新的颜色值
@size-change    画笔粗细变化时触发           新的粗细值
@isEmpty-change 画布是否为空的状态变化时触发  Boolean

方法 (Methods)

通过 ref 调用组件方法。

方法名           说明                         参数
clear             清除画布                   -
undo              撤销上一步操作            -
redo              重做被撤销的操作           -
exportSignature   导出签名图片         -
isEmpty           检查画布是否为空 (异步) 返回 Promise<Boolean>

作用域插槽 (Scoped Slot)

组件提供了 footer 插槽，可用于完全自定义底部操作栏。

<hy-signature-pad>
  <template #footer="{ isEmpty, exportSignature, clear, undo, redo, canUndo, canRedo }">
    <view class="my-custom-footer">
      <button @click="undo" :disabled="!canUndo">自定义撤销</button>
      <button @click="redo" :disabled="!canRedo">自定义重做</button>
      <button @click="clear">自定义清除</button>
      <button @click="exportSignature" :disabled="isEmpty">自定义保存</button>
    </view>
  </template>
</hy-signature-pad>

注意事项

1.Canvas 尺寸: canvas-width 和 canvas-height 是 Canvas 的实际像素尺寸，影响导出图片的清晰度。容器的宽高由 width 和 height 控制，通常使用相对单位。请确保 Canvas 的像素尺寸足够大以获得清晰的导出图片，同时容器尺寸适配布局。
2.性能优化: 在高像素 Canvas 上频繁操作可能会对性能产生影响，尤其是低端设备。请根据实际需求平衡清晰度和性能。
3.平台差异: 虽然组件已处理多端兼容性，但不同平台底层 Canvas API 的细微差异仍可能存在。
4.导出格式: 小程序端导出的是临时文件路径，H5 和 App 端可能是 Base64 数据，请根据接收到的参数进行相应处理。