Autograph 手写签名

概述

Autograph 手写签名，用于手写电子签名。

支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	×	✓

温馨提示

• 使用前请先阅读uni-app官方 canvas组件 (opens new window) 注意事项。

• Nvue端touch事件暂时无法阻止默认事件，建议控制页面不可滚动或使用独立页面进行签名。

• Nvue下Canvas是作为独立的模块，云端打包时需要选择使用Canvas模块才能正常使用相关的功能。 需要在manifest.json的代码视图中配置如下（暂时还不支持可视化界面操作）：

"app-plus" : {
/* 模块配置 */
"modules" : {
   "Canvas" : "nvue canvas" //使用Canvas模块
 }
}

• nvue 端使用请先阅读文档底部提示说明！

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiAutograph from "@/components/firstui/fui-autograph/fui-autograph.vue"
 export default {
	components:{
	  fuiAutograph
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序和文档API。

组件初始化

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

<fui-autograph ref="autograph" @ready="ready"></fui-autograph>

data() {
	return {
		canvasId: '',
		src: ''
	}
},
methods: {
	ready(e) {
		this.canvasId = e.canvasId
	},
	//重新签名
	redraw() {
		if (!this.canvasId) return;
		this.src = '';
		this.$refs.autograph.redraw()
	},
	//完成签名
	complete() {
		if (!this.canvasId || this.src) return;
		this.$refs.autograph.drawComplete((res) => {
			//res为签名图片
			this.src = res;
		})
	}
}

Slots

名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
width	Number, String	画布宽度，单位rpx。为0时则使用屏幕宽度	0	-
height	Number, String	画布高度，单位rpx	400	-
background	String	画布外层容器背景色	#ffffff	-
lineWidth	Number, String	签名线条粗细（宽度），单位px	5	-
color	String	签名线条颜色	#181818	-
tips	String	未签名时调用完成方法时提示信息	请签名！	-

Events

事件名	说明	回调参数
@ready	组件初始化完成时触发	{   canvasId:唯一标识符 }

Methods

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

方法名	说明	传入参数
redraw	重新签名，清空画板	-
drawComplete	完成签名，返回签名图片地址	callback(res):回调函数

TIP

注：若 nvue android端报以下错误，暂时不用处理！

reportJSException >>>> exception function:gcanvas setBackGround for android view, 
exception:WX_RENDER_ERR_TEXTURE_SETBACKGROUND: 
TextureView doesn't support displaying a background drawable!

随着uni-app官方版本升级，目前针对 gcanvas 存在如下问题：

• 目前android端 gcanvas toTempFilePath API 在部分机型可能出现不触发回调的问题，需等官方进行修复！
• 部分 android机 使用 gcanvas 可能导致闪退
• 部分 android机 使用 gcanvas 绘制中文可能不显示

综上问题，涉及绘制并生成图片等操作目前 android端 不建议使用 nvue 的 gcanvas，需等uni-app官方优化！建议在.vue下使用组件！

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)