Signature_pad: 提高绘图质量

这是我去年夏天做的一个快速而肮脏的实验。 这个想法是在移动窗口上使用函数平滑路径。 窗口在代码中设置，但可以根据速度进行调整。 为简单起见，我使用了固定的笔宽。
http://scvsa-servizi.campusnet.unipr.it/tools/signature/signature_pad/example/

分类

@claudiorivetti这真是太棒了！ 我会检查一下。 我记得其中一个 Google 绘图应用程序使用了相同的解决方案。 不过，iMessage 的奇怪之处在于，滞后时间不比在这个库里……

如果您使用手指而不是手写笔进行绘图，则触摸点非常宽（肯定比一个像素宽），我不确定移动应用程序或浏览器实际上是如何计算出触摸事件的确切坐标的案子。 也许可以根据先前点的坐标和当前速度以某种方式调整浏览器接收到的坐标，而不仅仅是在它们之间插入路径。 我不确定这是否有意义，或者我是否有时间尝试它。 我必须使这些点可见，以查看曲线本身是否可以改进，或者点是否不在“理想”线上。

@claudiorivetti太美了，我怎么能得到这样的魔法？ :) 诚然，它必须更现实一点，要么完全动态，要么只是一条粗线就足够了。

我观察到的大多数人由于某种原因写得很慢，看起来很像 90 年代。 我只是无法通过调整 SignaturePad 输入参数来摆脱粗糙的角落：

（ PS：无论是在桌面、iPhone、平板笔还是手指上都没有关系。它看起来总是一样的。画布是 1200x600 像素，比例为 3,3（所以，400x400px）。我不认为分辨率是问题）

令我印象深刻的是，其他库根本没有动态宽度，但对我来说通常看起来“更干净”。 例如，与我在上面发布的图像相比。

超级签名自动修复曲线

jSignature ) 有点不稳定，但仍然不是像素化的。

@halo我想避免后处理/自动修复，尽管我同意结果通常要好得多。 问题是，至少在 iMessage 中，可以在没有任何明显后期处理的情况下拥有流畅的线条。 我想尝试一些事情，例如彼此太接近的跳过点。 最近添加了节流，但是如果有人画得很慢，那将无济于事。

另一件事是我不再使用这个库，所以除非我找到一些示例如何提供更流畅的线条（就像我对Square 的帖子所做的那样），我认为我不会有很多时间来调查它我。

@halo我做了一个快速的实验，如果它太接近前一个点，我会跳过一个点。 当绘制速度非常慢时，它似乎可以提高绘制质量，但会引入明显的延迟。 不过，与 iOS iMessage 或 Notes 应用程序中的功能相去甚远：/ 该演示可在http://signature-pad.surge.sh/获得，您可以尝试更改signaturePad.minDistance值以查看它的影响图纸。 默认值为 5，表示如果上一个点与新点的距离小于 5px，则跳过新点。

另外，我使用performance.now到#_updateStroke函数（演示中不存在）添加了一个计时，除非有异步发生或我搞砸了，否则它看起来需要不到 1毫秒来添加一个点并绘制一条曲线。 这意味着有足够的时间进行更多花哨的处理。

我将非常感激地在生产环境中与真实用户一起尝试并给你反馈。 你有 Github 上的分支或我可以使用的 dist 文件吗？

我喜欢这种方法，非常感谢您尝试一下。

编辑：我认为我可以使用http://signature-pad.surge.sh/js/signature_pad.js

@halo如果您想构建自己的版本（例如缩小版），我只是将其推送到https://github.com/szimek/signature_pad/tree/improve-drawing-quality分支。

谢谢，我刚刚从演示页面中获取了编译好的一个并将其部署到生产环境中。 将在接下来的 1-3 周内通知您收到它的方式。

@halo & @szimek - 看看这两个链接，它会有所帮助

• http://paperjs.org/examples/path-simplification/
• http://thejosephturner.com/simpleline/

@fa-at-pulsit 谢谢！ 但是，这两个示例都简化了用户停止绘制路径后的路径，我想避免这种情况。 也许我会在某个时候放弃并只使用这个解决方案，但我希望可以在没有明显延迟的情况下获得更好的结果。

我想避免后处理/自动修复

只是出于好奇，这是为什么呢？

• [ ] 保持代码简单和健壮，避免错误
• [ ] 不会因视觉故障而扰乱最终用户体验
• [ ] 防止在写入时暴露绘图流的锁定
• [ ] 现有的后处理方案还不够成熟

顺便说一句，从过去一周我从最终用户那里收到的主观反馈中，我可以看出绘图质量立即被认为“明显提高”（通过定期重复签名）。 我会看看我是否能得到更多的肉，但我将无法在此处公开真实世界的签名以进行比较。

我只能说大多数人写得慢得可笑，而且小得可笑，不管你告诉他们多少。 ;) 另外，我怀疑设备（Surface Pro）是罪魁祸首。 在某些时候，将 iPad 与其中一支花哨的新笔一起使用可能会让我对此有更深入的了解。

@szimek这个另一个例子简化了运行中的路径（我认为是这样）
看看这个视频 https://www.youtube.com/watch?v=H79iUsai6uc
来源-> https://github.com/eur00t/Effective-Curve-Fitting
并且我通过调整画布大小在视网膜上获得了更好的效果
<canvas width="1000" height="200" style="width: 500px; height: 100px;"/>

@fa-at-pulsit 谢谢！ 我在 iMessage 应用程序上玩得更多（可能是因为我的 iPhone 5 超级慢），我注意到它也可以即时进行后期处理，但它非常微妙且几乎不引人注意。

我必须先发布一个带有一些错误修复的新版本，然后我会尝试发布一个新版本，其中包含彼此太接近的可选跳过点，然后在后处理中即时查看这个 - 看起来真的有希望。

所以，经过 1.5 个月的制作，我可以自信地说，这个 PR 大大提高了质量。 几十个人一次又一次地签名，与他们之前的签名相比，看起来好多了。

我必须先发布一个带有一些错误修复的新版本，然后我会尝试发布一个带有可选跳点的新版本，这些跳点彼此太接近

你好！ 你需要向后兼容吗？ 还是只是这个提交？

编辑：我的错，它已经通过这个提交合并了，对吧？ 真的谢谢你！！

有什么方法可以提高绘制速度吗？