Taroify

Signature 签名

介绍

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

引入

import { Signature } from "@taroify/core"

代码演示

基础用法

Canvas实例提供两个方法

getImage
- image：签名对应的图片，为 base64 字符串格式。若签名为空，则返回空字符串。
- canvas：Canvas 元素。
clear：清空

import { Signature, SignatureInstance, Flex, Button } from "@taroify/core"

function BasicSignature() {
  const ref = useRef<SignatureInstance>(null)
  return <>
    <Signature ref={ref} />
    <Flex justify="end">
      <Button size="small" onClick={() => { ref.current?.clear() }} style={{ marginRight: "1rem" }}>取消</Button>
      <Button size="small" color="primary" onClick={() => { console.log(ref.current?.getImage()) }}>确认</Button>
    </Flex>
  </>
}

自定义颜色

通过 penColor 来自定义笔触颜色。

<Signature penColor="#ff0000" />

自定义线宽

通过 lineWidth 来自定义线条宽度。

<Signature lineWidth={6} />

自定义背景颜色

通过 backgroundColor 来自定义背景颜色。

<Signature backgroundColor="#eee" />

API

Signature Props

参数	说明	类型	默认值
type	导出图片类型	string	`png`
penColor	笔触颜色，默认黑色	string	`#000`
lineWidth	线条宽度	number	`3`
backgroundColor	背景颜色	string	-
canvasId	canvas id	string	`taroify-canvas`

Signature Events

事件名	说明	回调参数
onStart	开始签名时触发	-
onEnd	结束签名时触发	-
onSigning	签名过程中触发	-

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
—signature-padding	var(—van-padding-xs)	-
—signature-content-height	200px	画布高度
—signature-content-background	var(—background-color-2)	画布背景色
—signature-content-border	1px dotted #dadada	画布边框样式
—signature-border-radius	8px	画布圆角