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

问：

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

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

enter image description here

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

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

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

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

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

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

出于好奇开始赏金，自从提出这个问题以来，在这段时间里是否有任何变化。

JavaScript jQuery HTML 平板电脑

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

编辑：另请参阅HTML 5中的这个。

4赞 Gregory Pakosz 12/8/2009 #2

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

它免费用于非商业用途。根据他们的网站，商业用途价格为 29 欧元。不过，它不是开源的。

恕我直言，值得一看。

或者，您可以实现基于 svg-edit 的东西，它是开源的，并使用 jQuery（演示）。如果需要 Google Frame 插件支持 IE6+。

编辑：我刚刚找到了svg-freehand-signature项目（演示），该项目捕获您的手写签名并使用POST将其作为SVG发送到服务器。它以简单明了且独立的 zip 形式分发（适用于 Safari 和 Firefox，您可能希望将其与 svgweb 结合使用，为 Internet Explorer 提供 SVG 支持）。

编辑：我成功地将塞萨尔·奥利维拉（Cesar Oliveira）的canvaslol（只需查看页面的源代码即可了解其工作原理）与ExplorerCanvas相结合，以在IE上拥有一些东西。您还可以看看 Anne van Kesteren 的 Paintr 实验。

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

2赞 Gregory Pakosz 12/13/2009

井。。。无论如何，这是你的电话。恕我直言，Oekaki 和 Java 小程序是如此 1999 年......用户体验永远不会像 Javascript 或最终的 Flash 那样流畅。SVG 的主要优点是，您可以在事后获得有意义的东西，而不仅仅是图像。

12赞 Breton 12/12/2009 #3

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

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

或者你可以使用一个该死的 canvas 标签、onmousemove 事件、event.pageX|pageY 一些三次插值、canvas 的“toDataURI”api，将结果发布到你的 php 脚本，然后说你做了所有其他花哨的东西。

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

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

0赞 Gabe 4/3/2011

@Pekka：我不知道插值，但Photoshop的作用是将鼠标位置排成一排，一有机会就画出来。如果你只在绘制了最后一个鼠标位置后才获得新的鼠标位置，你会得到多边形而不是曲线。

0赞 bpierre 4/3/2011 #4

markup.io 使用鼠标向上后应用的算法来做到这一点。

我最近问了一个类似的问题，得到了有趣但并不令人满意的答案：有没有办法加速mousemove事件？

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

Recording and storing high-res hand drawing

评论

评论

评论

评论