Signature 签名

介绍

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

引入

import { IBestSignature } from "@ibestservices/ibest-ui";

代码演示

基础用法

点我查看代码

@Entry
@Component
struct DemoPage {
  @State imgUrl: string = ""
  build() {
    Column({ space: 20 }){
      IBestSignature({
        onConfirm: (url: string) => {
          this.imgUrl = url
        }
      })
      if(this.imgUrl){
        Image(this.imgUrl)
      }
    }
  }
}

自定义样式

点我查看代码

@Entry
@Component
struct DemoPage {
  @State imgUrl: string = ""
  build() {
    Column({ space: 20 }){
      IBestSignature({
        penColor: "#ff0000",
        lineWidth: 5,
        bgColor: "#eee",
        onConfirm: (url: string) => {
          this.imgUrl = url
        }
      })
      if(this.imgUrl){
        Image(this.imgUrl)
      }
    }
  }
}

自定义宽高

点我查看代码

@Entry
@Component
struct DemoPage {
  @State imgUrl: string = ""
  build() {
    Column({ space: 20 }){
      IBestSignature({
        boardWidth: 300,
        boardHeight: 200,
        onConfirm: (url: string) => {
          this.imgUrl = url
        }
      })
      if(this.imgUrl){
        Image(this.imgUrl)
      }
    }
  }
}

controller 控制器

点我查看代码

import { IBestSignatureController } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State imgUrl: string = ""
  private controller: IBestSignatureController = new IBestSignatureController()
  build() {
    Column({ space: 20 }){
      IBestSignature({
        controller: this.controller,
        isShowFooter: false,
        onConfirm: (url: string) => {
          this.imgUrl = url
        }
      })
      if(this.imgUrl){
        Image(this.imgUrl)
      }
      Row({ space: 10 }){
        IBestButton({
          text: '清空',
          onClickBtn: () => {
            this.controller.clear()
          }
        })
        IBestButton({
          text: '确认',
          type: 'primary',
          onClickBtn: () => {
            this.controller.confirm()
          }
        })
      }
    }
  }
}

API

@Props

参数	说明	类型	默认值
boardWidth	画板宽度, 小于0都默认为百分百	number | string	-1
boardHeight	画板高度,单位lpx	number | string	400
exportImgType	导出图片类型, 可选值 png jpeg webp	string	png
penColor	笔触颜色	string | number | CanvasGradient | CanvasPattern	#000
lineWidth	线条宽度, 单位vp	number	3
bgColor	背景色	ResourceColor	#fff
clearText	清除按钮文案	string	清空
confirmText	确认按钮文案	string	确认
isShowFooter	是否显示底部按钮	boolean	true

Events

事件名	说明	回调参数
onDrawEnd	手指离开屏幕触发	-
onConfirm	点击确定按钮的回调	url: string
onClear	点击清空按钮的回调	-

controller 控制器

方法名	说明	方法参数
clear	清空画板, 会触发onClear事件	-
confirm	确认签名, 会触发onConfirm事件	-