Signature 签名

介绍

用于签名场景，基于 Canvas 实现。

基础用法

通过组件的 ref 获取实例，调用 getImage 方法获取签名图片。

• web端时，获取图片是 base64 格式
• 小程序端时，获取图片是 filePath 格式

<vd-signature ref="signatureRef" />
<vd-button type="primary" :action="handleSubmit">确认</vd-button>

const signatureRef = shallowRef();

async function handleSubmit() {
  // 校验是否签名
  if (!signatureRef.value.validate()) {
    return; // 未签名
  }

  // 获取签名图片
  const image = await signatureRef.value.getImage();

  console.log('签名图片：', image);
}

画笔线条颜色

通过 line-color 属性配置画笔线条颜色。

<vd-signature ref="signatureRef" line-color="#000" />

画笔线条宽度

通过 line-width 属性配置画笔线条宽度。

<vd-signature ref="signatureRef" line-width="2" />

画布背景颜色

通过 background 属性配置画布背景颜色。

<vd-signature ref="signatureRef" background="#fff" />

贝塞尔曲线绘制

通过 bezier-curve 属性配置是否使用贝塞尔曲线绘制，默认开启。

<vd-signature ref="signatureRef" :bezier-curve="false" />

笔锋模式

通过 pressure 开启压感笔锋效果，书写速度越快线条越细。可传入 true，或对象配置 enable、minWidth、maxWidth、minSpeed。开启后优先于 bezier-curve。

<vd-signature
  ref="signatureRef"
  :pressure="{ enable: true, minWidth: 2, maxWidth: 5, minSpeed: 1.5 }"
  :height="300"
/>

图片旋转角

通过 rotate 属性配置图片旋转角，也可以在获取图片时传参设置。

<vd-signature ref="signatureRef" rotate="90" />

const signatureRef = shallowRef();

async function handleSubmit() {
  // 校验是否签名
  if (!signatureRef.value.validate()) {
    return; // 未签名
  }

  // 获取签名图片
  const image = await signatureRef.value.getImage({
    rotate: 90,
  });

  console.log('签名图片：', image);
}

缓存和加载已有签名数据

通过 getLines 和 loadLines 方法获取和加载已有签名数据。

<vd-signature ref="signatureRef" />
<vd-button type="primary" :action="handleLoad">加载</vd-button>
<vd-button type="primary" :action="handleSave">保存</vd-button>

const signatureRef = shallowRef();

function handleLoad() {
  const lines = uni.getStorageSync('signature-lines');
  signatureRef.value.loadLines(lines);
  console.log('加载的签名数据：', lines);
}

function handleSave() {
  const lines = signatureRef.value.getLines();
  uni.setStorageSync('signature-lines', lines);
  console.log('保存的签名数据：', lines);
}

清除签名

通过 clear 方法清除签名。

<vd-signature ref="signatureRef" />
<vd-button type="primary" :action="handleClear">清除</vd-button>

const signatureRef = shallowRef();

function handleClear() {
  signatureRef.value.clear();
}

撤销一步操作

通过 undo 方法撤销一步操作。

<vd-signature ref="signatureRef" />
<vd-button type="primary" :action="handleUndo">撤销</vd-button>

const signatureRef = shallowRef();

function handleUndo() {
  signatureRef.value.undo();
}

重做一步操作

通过 redo 方法重做一步操作。

<vd-signature ref="signatureRef" />
<vd-button type="primary" :action="handleRedo">重做</vd-button>

const signatureRef = shallowRef();

function handleRedo() {
  signatureRef.value.redo();
}

只读模式

通过 readonly 属性配置只读模式。

<vd-signature ref="signatureRef" readonly />

API

Props

参数	说明	类型	默认值
width	画布宽度	string | number	100%
height	画布高度	string | number	200
line-color	线条颜色	string	#000
line-width	线条宽度	string | number	2
background	画布背景色	string	#fff
bezier-curve	是否使用贝塞尔曲线绘制	boolean	true
pressure	笔锋（压感）配置，true 等价于 { enable: true }	boolean | SignaturePressure	-
rotate	图片旋转角	string | number	0
watermark	水印配置	string | SignatureWatermark	-
file-type	导出图片类型，可选 png jpg	ImageExportType	png
readonly	是否只读	boolean	false

SignaturePressure

参数	说明	类型	默认值
enable	是否开启笔锋模式	boolean	false
maxWidth	最大笔触宽度	number	5
minWidth	最小笔触宽度	number	2
minSpeed	最小速度阈值	number	1.5

SignatureWatermark

参数	说明	类型	默认值
text	水印文字	string	-
color	水印颜色	string	rgba(0, 0, 0, 0.1)
fontSize	水印字体大小	string | number	14
fontFamily	水印字体	string	sans-serif
spaceX	水印文字水平间距	string | number	5
spaceY	水印文字垂直间距	string | number	2
rotate	水印旋转角度	string | number	45

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
resize	尺寸改变时触发	NodeRect
start	签名开始时触发	SignatureEventData
signing	签名进行时触发	SignatureEventData
end	签名结束时触发	SignatureEventData

Expose

方法名 / 属性名	说明	参数	返回值
cxt	画布上下文	-	ShallowRef<UniApp.CanvasContext | null>
rotateCtx	旋转画布上下文	-	ShallowRef<UniApp.CanvasContext | null>
rect	画布尺寸与位置	-	{ width: number; height: number; left: number; top: number }
clear	清除签名	-	-
undo	撤销一步操作	-	-
redo	重做一步操作	-	-
validate	校验是否签名	-	boolean
getImage	获取签名图片	SignatureImageOption	Promise<string>
getLines	获取签名笔迹数据	-	SignatureLine[]
loadLines	加载签名笔迹数据	SignatureLine[]	-

类型定义

组件导出以下类型定义：

import type {
  SignatureEventData,
  SignatureImageOption,
  SignatureLine,
  SignatureExpose,
  SignatureInstance,
} from 'vital-design';