linjc / smooth-signature Goto Github PK

View Code? Open in Web Editor NEW

826.0 9.0 97.0 440 KB

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

Home Page: https://linjc.github.io/smooth-signature/

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 zijin2 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 sunkx rosenameelune yangjie-creator admobing whitecell2233

smooth-signature's Issues

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

window.devicePixelRatio 为1时，会出现鼠标与笔迹不对应的问题

在windows桌面设置缩放率为100%时，或者option.scale 为1时，会出现鼠标与笔迹不对应，偏移的问题。

建议addEventListener里加上{ passive: false }

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

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

h5端配置问题

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

npm 安装装了几千个依赖包

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

你好，会考虑支持 vue2？

希望开放onMove回调

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

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

设置的签名自提颜色为蓝色但是部分情况会出现黑色

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

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

赞！太赞了

特意提一个lssues赞一个，真心不错，解决了我的燃眉之急，十分感谢

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(); 

 }

初始化完调用 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(); 

 }

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

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

能兼容pad端横屏使用吗

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

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

你是怎么解决锯齿的呢

1.0.15中bgColor不生效

1.0.2版本中bgColor生效，但是删除了drawByImageUrl()方法，无法反显
1.0.15版本中bgColor设置之后没效果

经排查1.0.5->1.0.6这个版本出现了问题

是否支持占位文案

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

移动端横屏处理

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

	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();
	}