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

Question

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

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

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

它还必须具有高水平的图形质量，即抗击Aenstroke 。没什么好看的，但是MS Paint风格，1x1 Pixel笔画不会削减它。

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

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

FF4，Chrome支持是必须的; Opera，IE8 / 9支持是理想的。

  

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

  

出于好奇心而开始赏金是否在此问题被提出以来的任何时候发生了变化。

Answer 1

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

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

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

在我的测试中，onmousemove将为每个像素的移动提供一个事件，仅受浏览器中事件循环的速度限制。您将获得具有快速移动的稀疏数据点（多边形），并且在没有大量研究资助和硬件设计者的情况下获得的效果非常好。交易。

Answer 2

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

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

修改：另请参阅HTML 5中的this。

Answer 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 Paintr实验。

Answer 4

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

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