签名板 xSignBoard

---

在线预览

在线模拟尺寸:

介绍

手写签名板，适合需要签字的场景

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-sign-board/x-sign-board.uvue

使用

<x-sign-board></x-sign-board>

Props 属性

名称	说明	类型	默认值
width	宽度，可任意单位	string	'100%'
height	高度，可任意单位	string	'150'
backgroundColor	背景颜色	string	'rgba(0,0,0,0)'
strokeColor	画笔颜色	string	'primary'
strokeWidth	画笔粗细	number	8
penType	笔型 default：默认圆润笔峰，速度越快越细，起收笔圆润 pen：钢笔/刀峰效果，笔画锋利，转折尖锐，下压粗上提细 pencil：铅笔效果，粗细均匀，带轻微颗粒质感	xSignBoardPenType	'default'

Events 事件

名称	参数	说明

Slots 插槽

名称	说明	数据

Ref 方法

名称	参数	返回值	说明
getLineCount	-	-	获取笔画数量 *
clear	-	-	清空画布 *
back	-	-	回退步数 *
go	-	-	前进步数 *
getImage	-	-	获取图片数据 *

示例文件路径

/pages/qita/sign-board

示例源码

uvue

<template>

	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<view >
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">签名板 SignBoard</x-text>
			<x-text color="#999999" >
				提供高性能流畅性的原生绘制，支持三种笔型切换
			</x-text>
		</x-sheet>

		<x-sheet class="flex flex-row" style="justify-content: center;">
			<x-button :skin="penType=='default'?'default':'outline'" @click="penType='default'">默认</x-button>
			<x-button class="mx-10" :skin="penType=='pen'?'default':'outline'" @click="penType='pen'">钢笔</x-button>
			<x-button :skin="penType=='pencil'?'default':'outline'" @click="penType='pencil'">铅笔</x-button>
		</x-sheet>

		<x-sheet dark-color="#333" color="#000">
			<x-text font-size="14" color="#999" class="mb-8">{{penLabel}}</x-text>
			<x-sign-board height="180" ref="boardRef" :pen-type="penType" :stroke-color="color" ></x-sign-board>
		</x-sheet>
		
		<x-sheet class="flex flex-row">
			<x-button width="31%"  @click="saveImg">保存图片</x-button>
			<x-button width="31%"  class="mx-10"  @click="checkCount">是否签名</x-button>
			<x-button width="31%" color="error" @click="clear">清除</x-button>
		</x-sheet>
		
		<x-sheet dark-color="#333">
			<x-text font-size="18" class=" text-weight-b mb-8">演示在弹层内</x-text>
			<x-modal @open="opended" @close="show=false" height="350">
				<template v-slot:trigger>
					<x-button :block="true" >打开</x-button>
				</template>
				<x-text v-if="!show">加载中</x-text>
				<x-sign-board v-if="show" height="200" ref="boardRef" :stroke-width="3" :pen-type="penType" stroke-color="#000000" ></x-sign-board>
			</x-modal>
		</x-sheet>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">点击上方保存图片预览</x-text>
			<image :style="{width:width+'px',height:height+'px'}" :src="img"></image>
		</x-sheet>
	</view>

</template>

<script lang="uts" setup >
	const img = ref("")
	const width = ref(0)
	const height = ref(0)
	const color = ref("#fff")
	const penType = ref("default")
	const penLabel = computed(():string => {
		if (penType.value == 'pen') return '钢笔/刀峰：速度越快越细，转角锋利，收笔尖锐'
		if (penType.value == 'pencil') return '铅笔：粗细均匀，半透明叠加，轻微颗粒感'
		return '默认：圆润笔峰，速度感应，起收笔圆润自然'
	})
	const boardRef = ref<XSignBoardComponentPublicInstance|null>(null)
	const clear = ()=>{
		boardRef.value!.clear()
	}
	const saveImg = ()=>{
		boardRef.value!.getImage().then((res:UTSJSONObject)=>{
			img.value = res.getString('src') as string;
			width.value  = res.getNumber('width') as number;
			height.value  = res.getNumber('height') as number;
		})
	}
	const checkCount = ()=>{
		let count = boardRef.value!.getLineCount();
		if(count<5){
			uni.showToast({
				title:"连笔过多或者未签名",
				icon:"error"
			})
			return;
		}
		uni.showToast({
			title:"已签名",
			icon:"success"
		})
	}

	const show = ref(false)
	const opended = ()=>{
		setTimeout(function() {
			show.value = true;
		}, 300);
	}
	
</script>

<style lang="scss">

</style>