vant icon indicating copy to clipboard operation
vant copied to clipboard

[Feature Request] 签名模块增加签名模板文字

Open njtyair opened this issue 1 year ago • 6 comments

这个功能解决了什么问题?

感谢vant团队付出! 希望新增的功能:签名模块增加签名模板文字 功能使用场景:用户在签名的时候,目前签名框是纯色底,希望可以增加田字格模板文字,使得用户可以类似描红一样去签字,提高签名文字的规范性,为后期OCR识别文字提供基础

你期望的 API 是什么样子的?

<van-signature :backText="黄哲成" @submit="onSubmit" @clear="onClear" />

njtyair avatar May 08 '23 06:05 njtyair

当导出的签名不需要背景时,可以通过CSS设置背景颜色或图片。

对于需要签名和背景一并导出的场景:

  1. 背景颜色可以由组件支持
  2. 背景图片涉及到图片的加载、渲染的位置和尺寸,让用户通过 ref 获取 canvas 实例自行处理是否更好一些 @chenjiahan

inottn avatar May 08 '23 15:05 inottn

签名组件css样式上的背景色目前只作用于视觉与实际导出的图片无关。默认是alpha透明底色。 增加签名模板文字感觉定制化程度太高,没有设计标准。这种需求可以将画布背景色去掉然后通过在signature签名组件下方叠加一个田字格组件即可实现

oljc avatar May 11 '23 03:05 oljc

让用户通过 ref 获取 canvas 实例自行处理是否更好一些

可以暴露 canvas 来支持一些复杂的需求,没问题👌

这种需求可以将画布背景色去掉然后通过在 signature 签名组件下方叠加一个田字格组件即可实现

+1

chenjiahan avatar Jun 17 '23 13:06 chenjiahan

@chenjiahan 有个问题,之前考虑对外暴露 canvas 的方式有两种,需要看下哪种会好一点。

第一种方式是

useExpose({
  canvasRef,
});

这种方式有两个问题:一是用户的类型提示会有问题,因为 vue 提供的 expose 类型对于 ref 会自动解包。二是用户使用 compRef.value?.canvasRef.value 看上去有点冗长。

第二种是使用 get 模拟 expose 的自动解包的功能。

useExpose({
  get canvas() {
    return canvasRef.value;
  },
});

这种方式的问题是目前 useExpose 的实现不支持 get,需要稍微修改下 useExpose 的逻辑。

inottn avatar Aug 18 '23 08:08 inottn

是否可以增加横屏全屏切换,竖屏的可视范围小的情况下可以切换全屏书写

Yaonie-Jie avatar Apr 09 '24 03:04 Yaonie-Jie

是否可以增加横屏全屏切换,竖屏的可视范围小的情况下可以切换全屏书写

横屏全屏切换,感觉还是有这方面需求竖屏的话需要把画布高度增加到满屏也能勉强够用,只是这样对用户不太友好,界面不美观

GasGenerator avatar May 14 '24 02:05 GasGenerator