Signature 签名

介绍

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

请升级 taroify 到 >= v0.1.1-alpha.2 版本来使用该组件。

引入

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	画布圆角

#Signature 签名

#介绍

#引入

#代码演示

#基础用法

#自定义颜色

#自定义线宽

#自定义背景颜色

#API

#Signature Props

#Signature Events

#主题定制

#样式变量