├── .npmignore ├── typings.d.ts ├── example ├── .gitignore ├── public │ └── favicon.ico ├── vite.config.js ├── README.md ├── index.html ├── package.json └── src │ ├── App.vue │ ├── main.js │ └── components │ ├── pcDemo.vue │ └── mbDemo.vue ├── .fatherrc.ts ├── .gitignore ├── tsconfig.json ├── package.json ├── LICENSE ├── README.md └── src └── index.ts /.npmignore: -------------------------------------------------------------------------------- 1 | example -------------------------------------------------------------------------------- /typings.d.ts: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linjc/smooth-signature/HEAD/example/public/favicon.ico -------------------------------------------------------------------------------- /.fatherrc.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | esm: 'babel', 3 | cjs: 'babel', 4 | umd: { 5 | name: 'SmoothSignature' 6 | }, 7 | disableTypeCheck: true 8 | } 9 | -------------------------------------------------------------------------------- /example/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | base: './', 7 | plugins: [vue()] 8 | }) 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | miniprogram_npm 4 | .tea 5 | .swan 6 | .vscode-swan 7 | 8 | # local env files 9 | .env.local 10 | .env.*.local 11 | 12 | # Log files 13 | debug.log* 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | 18 | # Editor directories and files 19 | .idea 20 | .vscode 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | 27 | dist 28 | es 29 | lib -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + Vite 2 | 3 | This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` 12 | 13 | 14 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --host", 6 | "start": "vite --host", 7 | "build": "vite build", 8 | "serve": "vite preview" 9 | }, 10 | "dependencies": { 11 | "smooth-signature": "^1.0.0", 12 | "viewerjs": "^1.10.1", 13 | "vue": "^3.2.6" 14 | }, 15 | "devDependencies": { 16 | "@vitejs/plugin-vue": "^1.6.1", 17 | "@vue/compiler-sfc": "^3.2.6", 18 | "vite": "^2.5.4" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "moduleResolution": "node", 5 | "jsx": "preserve", 6 | "allowJs": true, 7 | "esModuleInterop": true, 8 | "experimentalDecorators": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noImplicitReturns": true, 12 | "suppressImplicitAnyIndexErrors": true, 13 | "declaration": true 14 | }, 15 | "include": [ 16 | "./src", 17 | "./typings.d.ts" 18 | ], 19 | } 20 | -------------------------------------------------------------------------------- /example/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 17 | 18 | 31 | -------------------------------------------------------------------------------- /example/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import Viewer from 'viewerjs'; 4 | import 'viewerjs/dist/viewer.css'; 5 | 6 | window.previewImage = function (url, degree) { 7 | const img = document.createElement('img') 8 | img.src = url 9 | const viewer = new Viewer(img, { 10 | title: 0, 11 | navbar: 0, 12 | toolbar: { 13 | zoomIn: 1, 14 | zoomOut: 1, 15 | oneToOne: 1, 16 | reset: 1, 17 | rotateLeft: 1, 18 | rotateRight: 1, 19 | flipHorizontal: 1, 20 | flipVertical: 1, 21 | }, 22 | viewed() { 23 | if (degree) { 24 | this.viewer.zoomTo(0.8).rotateTo(degree); 25 | } 26 | } 27 | }) 28 | img.onload = function() { 29 | viewer.show() 30 | } 31 | } 32 | 33 | createApp(App).mount('#app') 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "smooth-signature", 3 | "version": "1.1.0", 4 | "description": "前端H5带笔锋手写签名，支持PC端和移动端，无框架限制，Vue、React等均可使用", 5 | "main": "lib/index.js", 6 | "module": "es/index.js", 7 | "browser": "dist/index.umd.min.js", 8 | "types": "dist/index.d.ts", 9 | "files": [ 10 | "dist", 11 | "lib", 12 | "es", 13 | "README.md" 14 | ], 15 | "keywords": [ 16 | "带笔锋手写签名", 17 | "手写签名", 18 | "H5手写签名", 19 | "web手写签名", 20 | "canvas手写签名", 21 | "前端手写签名", 22 | "移动端手写签名" 23 | ], 24 | "scripts": { 25 | "start": "cd example && yarn dev", 26 | "build": "father build", 27 | "watch": "father build --watch" 28 | }, 29 | "homepage": "https://github.com/linjc/smooth-signature", 30 | "repository": { 31 | "type": "git", 32 | "url": "https://github.com/linjc/smooth-signature.git" 33 | }, 34 | "bugs": { 35 | "url": "https://github.com/linjc/smooth-signature/issues" 36 | }, 37 | "license": "MIT", 38 | "devDependencies": { 39 | "father": "^2.30.10" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 linjc 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /example/src/components/pcDemo.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 64 | 65 | -------------------------------------------------------------------------------- /example/src/components/mbDemo.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 121 | 122 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # smooth-signature 带笔锋手写签名 2 | 3 | - [Demo在线演示](https://linjc.github.io/smooth-signature/) 以下截图为手机端手写效果图 4 | 5 | ![Demo](https://linjc.github.io/signature-demo.jpg) 6 | 7 | - [前言](#前言) 8 | - [安装](#安装) 9 | - [使用](#使用) 10 | - [配置](#配置options) 11 | - [实现原理](#实现原理) 12 | - [1、采集坐标](#1采集画笔经过的点坐标和时间) 13 | - [2、计算速度](#2计算两点之间移动速度) 14 | - [3、计算线宽](#3计算两点之间线的宽度) 15 | - [4、画线](#4画线) 16 | - [快捷链接](#快捷链接) 17 | 18 | ## 前言 19 | 受疫情的影响，无纸化流程和电子合同开始普及，电子签名需求也不断增加，签名体验也在逐渐改善，从一开始简单的canvas画线，到追求线条丝滑圆润，再到要求和纸上写字一样的笔锋效果等等。网上不少现成开源的签名库，其中[signature_pad](https://github.com/szimek/signature_pad)笔锋效果实现比较好，但具体使用还是会发现有明显的锯齿感，于是利用工作之余，根据自身理解换了另一种方案实现了一套，同时也为小程序开发了一版，一起分享给有需要的同学。 20 | 21 | [mini-smooth-signature](https://github.com/linjc/mini-smooth-signature) 小程序版带笔锋手写签名，支持多平台小程序使用 22 | 23 | ## 安装 24 | 25 | ```bash 26 | npm install smooth-signature 27 | # 或 28 | yarn add smooth-signature 29 | ``` 30 | 31 | 或通过