记录和存储高分辨率手绘图

Posted 2023-02-25

【中文标题】记录和存储高分辨率手绘图

【英文标题】：Recording and storing high-res hand drawing

【发布时间】：2009-11-29 13:12:36

【问题描述】：

是否有任何高级解决方案可以使用 javascript 在网站上捕获手绘图（从平板电脑、触摸屏或类似 iPad 的设备）并将其存储在服务器端？

本质上，这将是一个简单的鼠标绘图画布，其特点是其分辨率（即每秒捕获的鼠标移动次数）需要非常高，否则绘图中的线条为圆形快速移动笔/鼠标时将变为“多边形”：

（如果不是这种情况，@Gregory 建议的 inputDraw 解决方案将是 100% 完美。）

它还必须具有高水平的图形质量，即对笔画进行抗锯齿。这里没有什么花哨的，但 MS Paint 风格，1x1 像素笔画不会削减它。

总的来说，我发现这是一件非常有趣的事情，因为平板电脑至少变得越来越普遍。 （并不是说他们得到了我认为他们应得的关注）。

非常感谢任何建议。我更喜欢开源解决方案，但我也对 ActiveX 控件或 Java Applet 等专有解决方案持开放态度。

FF4，Chrome 支持是必须的； Opera，需要 IE8/9 支持。

请注意，周围的大多数“画布”库以及与我类似的其他问题的大多数答案，都是指以编程方式在画布上绘图。这不是我想要的不是。我正在寻找可以记录用户在特定区域绘图的实际笔或鼠标移动的东西。

出于好奇，自提出此问题以来是否有任何变化，开始赏金。

【问题讨论】：

手写笔压敏 API 还没有。我打赌它会在半年内。

是的，迟早会有事的。不过，就我的目的而言，它不需要对压力敏感。干净的跟踪和漂亮的中风就足够了。

【参考方案1】：

我怀疑你会得到比“onmousemove”事件给你更高的分辨率，而无需在为此目的定制的一些嵌入式系统上编写高效的汇编程序。您在操作系统中运行，您按照操作系统的规则进行操作，这意味着您受到操作系统提供给您的时间片频率的限制。 （通常每秒大约 100 个，根据负载变化）我没有使用可以克服“多边形”问题的平板电脑，并且我使用了一些高端平板电脑。 Photoshop 克服了三次插值的问题。

也就是说，除非您有一个非常特殊的平板电脑，它可以捕获许多移动事件并将它们排队到某个内部缓冲区，并在向操作系统发送数据时一次发送整个坐标包。不过，我查看了平板电脑 api，它们一次只给出一组坐标，所以如果要发生这种情况，您将需要自定义硬件、自定义驱动程序以及可以处理多个数据包的自定义 api坐标。

或者你可以只使用该死的canvas tag、onmousemove 事件、event.pageX|pageY 一些cubic interpolation、"toDataURI" api 的画布，将结果发布到你的 php 脚本，然后就说你做了所有其他花哨的东西。

在我的测试中，onmousemove 会为每个移动像素提供一个事件，仅受浏览器中事件循环的速度限制。您将获得快速移动的稀疏数据点（多边形），这与没有大量研究资助和硬件设计师的情况一样好。成交。

【讨论】：

感谢您提供背景信息。我不知道Photoshop是如何做到的，非常有趣。我在其他问题中找到了一些对我来说很有希望的解决方案，并且似乎为我提供了适当的更新频率（不过，我还没有时间用平板电脑测试它们）。

@Pekka：我不知道插值，但 Photoshop 所做的是将鼠标位置排队，并在有机会时绘制它们。如果仅在绘制最后一个鼠标位置后才获得新的鼠标位置，则会得到多边形而不是曲线。

【参考方案2】：

在 oekaki 世界中有一些用于此目的的小程序：Shi painter、Chibipaint 或 PaintBBS。 Here 你有用于集成的 php 类。

这些小程序生成的图纸质量非常好。如果您在oekakicentral.com 注册，您可以看到所有的画廊，并且一些图纸有一个动画链接，显示它是如何绘制的（这取决于小程序），因此您可以比较小程序的可能性。其中一些是开源的。

编辑：另见this 用 html 5 制作。

【参考方案3】：

看看<InputDraw/>：一个将手绘图转换为 SVG 的 Flash 组件。然后您可以将生成的 SVG 发送回您的服务器。

它可免费用于非商业用途。根据他们的网站，商业使用价格是29€。虽然它不是开源的。

恕我直言，值得一看。

或者，您可以基于 svg-edit 实现一些东西，它是开源的并使用 jQuery (demo)。如果需要 Google Frame Plugin 来支持 IE6+。

编辑：我刚刚找到了svg-freehand-signature 项目 (demo)，它捕获您的手写签名并使用 POST 将其作为 SVG 发送到服务器。它以straight-forward and self-contained zip 的形式分发（在 Safari 和 Firefox 中开箱即用，您可能希望将其与 svgweb 和 brings SVG support to Internet Explorer 结合使用）。

编辑：我成功地将Cesar Oliveira's canvaslol（只需查看页面的源代码以了解它是如何工作的）与ExplorerCanvas 结合起来在IE 上拥有一些东西。你也可以看看Anne van Kesteren's Paintrexperiment。

【讨论】：

“把图纸转成 SVG”这个角度很有意思，尤其是 svg-freehand-signature 看起来很棒，速度也够快。出于这个赏金的目的，我将接受 nacmartin 的 oekaki 建议，因为所讨论的项目主要是关于绘画，而那些编辑承诺大量不同的笔触、纹理等。仍然 - 非常有用的链接，谢谢！

嗯...无论如何，这是您的电话。 Imho Oekaki 和 Java 小程序是 1999 年......用户体验永远不会像使用 Javascript 或最终 Flash 一样流畅。 SVG 的主要优势在于您可以在之后得到一些有意义的东西，而不仅仅是一张图片。

【参考方案4】：

markup.io 正在使用 mouseup 之后应用的算法来执行此操作。

我最近问了一个类似的问题，得到了有趣但不令人满意的答案：Is there any way to accelerate the mousemove event?

【讨论】：

许多软件在绘制 SVG 线条时会使用平滑。有时它非常微妙，有时非常激进。