{"repo":"linjc/smooth-signature","free":true,"listed":false,"github":"https://github.com/linjc/smooth-signature","clone":"git clone https://github.com/linjc/smooth-signature.git","description":"H5带笔锋手写签名，支持PC端和移动端，任何前端框架均可使用","language":"TypeScript","stars":1017,"topics":["canvas","signature","javascript","react-signature","vue-signature","typescript"],"license":"MIT","category":"dev-tools","readme_excerpt":"smooth-signature 带笔锋手写签名 - Demo在线演示 以下截图为手机端手写效果图 - 前言 - 安装 - 使用 - 配置 - 实现原理 - 1、采集坐标 - 2、计算速度 - 3、计算线宽 - 4、画线 - 快捷链接 前言 受疫情的影响，无纸化流程和电子合同开始普及，电子签名需求也不断增加，签名体验也在逐渐改善，从一开始简单的canvas画线，到追求线条丝滑圆润，再到要求和纸上写字一样的笔锋效果等等。网上不少现成开源的签名库，其中signature pad笔锋效果实现比较好，但具体使用还是会发现有明显的锯齿感，于是利用工作之余，根据自身理解换了另一种方案实现了一套，同时也为小程序开发了一版，一起分享给有需要的同学。 mini-smooth-signature 小程序版带笔锋手写签名，支持多平台小程序使用 安装 或通过 引用，全局变量 window.SmoothSignature 也可自行下载smooth-signature.js到本地引用 使用 配置[options] 所有配置项均是可选的 options.width 画布在页面实际渲染的宽度(px) Type: number Default：canvas.clientWidth 320 options.height 画布在页面实际渲染的高度(px) Type: number Default：canvas.clientHeight 200 options.scale 画布缩放，可用于提高清晰度 Type: number Default：window.devicePixelRatio 1 options.color 画笔颜色 Type: string Default：black options.bgColor 画布背景颜色，默认透明 Type: string Default： options.openSmooth 是否开启笔锋效果，默认开启 Type: boolean Default：true options.minWidth 画笔最小宽度(px)，开启笔锋时画笔最小宽度 Type: number Default：2 options.maxWidth 画笔最大宽度(px)，开启笔锋时画笔最大宽度，或未开启笔锋时画笔正常宽度 Type: number Default：6 options.minSpeed 画笔达到最小宽度所需最小速度(px/ms)，取值范围1.0-10.0，值越小，画笔越容易变细，笔锋效果会比较明显，可以自行调整查看效果，选出自己满意的值。 Type: number Default：1.5 options.maxWidthDiffRate 相邻两线宽度增(减)量最大百分比，取值范围1-100，为了达到笔锋效果，画笔宽度会随画笔速度而改变，如果相邻两线宽度差太大，过渡效果就会很突兀，使用maxWidthDiffRate限制宽度差，让过渡效果更自然。可以自行调整查看效果，选出自己满意的值。 Type: number Default：20 options.onStart 绘画开始回调函数 Type: function options.onEnd 绘画结束回调函数 Type: function 实现原理 我们平时纸上写字，细看会发现笔画的粗细是不均匀的，这是写字过程中，笔的按压力度和移动速度不同而形成的。而在电脑手机浏览器上，虽然我们无法获取到触摸的压力，但可以通过画笔移动的速度来实现不均匀的笔画效果，让字体看起来和纸上写字一样有“笔锋”。下面介绍具体实现过程（以下展示代码只","default_branch":null,"files":null,"tree":[],"storefront":"/r/linjc","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/linjc/smooth-signature/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}