linjc / smooth-signature Goto Github PK

View Code? Open in Web Editor NEW

776.0 9.0 92.0 748 KB

H5带笔锋手写签名，支持PC端和移动端，任何前端框架均可使用

Home Page: https://l2j2c3.gitee.io/smooth-signature/demo

License: MIT License

TypeScript 64.83% HTML 1.86% Vue 29.23% JavaScript 4.08%

canvas signature javascript react-signature vue-signature typescript

smooth-signature's People

Contributors

Stargazers

Watchers

Forkers

ezhq ailonghun bolabola linsong8208 woshizilong ikkira 108518 spiroo wangzhengbo neyio ocean-zh qinxiaoxian senmu-a semdy alasai ajesses xmastan daodaoliang snryid mabing2637 dongnanyanhai sanyuesiyuewuyue li-coding fullstackuu chinalijinglun tcyufeng the101sniper lixinchuang hmd980929 793338023 hotthink coscx neatstudio fulviocanducci liweisx gogogosir touko9kyu lin-ya fengzhuo1997 reedf xinjn zlm897578001 hcy1996 equinoxfl zhiliao26 programmerhuang amumufun goodluck6688 lsabcd211 togoog happyi shenjler owen800q 2374060397 code-chen-n wangyusuo zhyfreefly changqing666 hitscs lp-imagine ongood penyuying erleu vanisper attraction11 bzliukai lantzshaw sangermax jackweirs jtzcode mark-public xiaohao19910303 gaoyangy utils-c366dcdf410746bba83ed1eddac25f35 chenxubin2016 githubforwk duanxianze codechengzhen yyyyh xinqinglhj specialmv deming1990 w3cnet linecode wenxuefeng3930 leadinfly web-ma-hub xindizhiyin2014 thirdqqq dabinw yingnian

smooth-signature's Issues

可以把经过的坐标以JSON的形式暴露出来吗

你好，会考虑支持 vue2？

手机端写起来有延迟,并且如果不连笔写的话会漏笔划

在pad（E人E本T12，华为pad）上参照/example/src/components/mbDemo.vue，写起来有延迟,并且如果不连笔写的话会漏笔划

能兼容pad端横屏使用吗

vue 中电脑上不能签名，但是用ipad 打开网页可以签名，。我用的pcDEMO

触屏笔记本 win11 谷歌浏览器签名用不了

用鼠标点击签名, 签名框里面没有反应
用触屏签名, 位置偏移很大
用demo地址测试也是这样的问题

建议addEventListener里加上{ passive: false }

移动端横屏处理

有没有横屏的处理方案
现状：现将页面布局后，然后整体旋转变成90度，但签名组件坐标计算会反过来，x变成y，y变成x

希望开放onMove回调

保存轨迹数据
绘制其他图形
轨迹回放
等都需要onmove回调保存轨迹节点进行实现

等大佬发布一个新版本 ~~

生成的png图片，文字边缘有些毛边，看起来模糊，canvas导出图片质量是写死的么？？

您好，我是纯html，想引入咱们这个怎么写呢

您好，我是采用纯html的方式去使用，这个smoothsignature的js使用<script> 的方式引入，好像不能new SmoothSignature的方式去创建这个canvas ，能帮我一下吗？如何在html上不使用vue去创建呢？？？？

h5端配置问题

按照示例在h5端配置了但是没有效果能否看一下demo的源码

isEmpty() 始终返回 false

您好，SmoothSignature 初始化完调用 isEmpty() 就返回 false。

看了下源码，empty()的逻辑是有问题的。

smooth-signature/src/index.ts

Lines 349 to 359 in d4f3964

    
           isEmpty = () => { 
        
             const canvas = document.createElement('canvas'); 
        
             canvas.width = this.canvas.width; 
        
             canvas.height = this.canvas.height; 
        
             if (this.bgColor) { 
        
               const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; 
        
               ctx.fillStyle = this.bgColor; 
        
               ctx.fillRect(0, 0, canvas.width, canvas.height); 
        
             } 
        
             return canvas.toDataURL() === this.canvas.toDataURL(); 
        
           }

你是怎么解决锯齿的呢

npm 安装装了几千个依赖包

added 3591 packages from 2206 contributors and audited 5898 packages in 238.834s

初始化完调用 isEmpty() 返回true

您好，SmoothSignature 初始化完调用 isEmpty() 就返回true。

这里的逻辑是有问题的。

smooth-signature/src/index.ts

Lines 349 to 359 in d4f3964

    
           isEmpty = () => { 
        
             const canvas = document.createElement('canvas'); 
        
             canvas.width = this.canvas.width; 
        
             canvas.height = this.canvas.height; 
        
             if (this.bgColor) { 
        
               const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; 
        
               ctx.fillStyle = this.bgColor; 
        
               ctx.fillRect(0, 0, canvas.width, canvas.height); 
        
             } 
        
             return canvas.toDataURL() === this.canvas.toDataURL(); 
        
           }

是否支持占位文案

请问，支持显示默认文字吗？就是没有写内容的时候会显示“在此签名”这种

	isEmpty = () => {
	const canvas = document.createElement('canvas');
	canvas.width = this.canvas.width;
	canvas.height = this.canvas.height;
	if (this.bgColor) {
	const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
	ctx.fillStyle = this.bgColor;
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	}
	return canvas.toDataURL() === this.canvas.toDataURL();
	}