14

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

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

在此处输入图像描述

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

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

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

任何建议都受到高度赞赏。我更喜欢开源解决方案，但我也对 ActiveX 控件或 Java Applet 等专有解决方案持开放态度。

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

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

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

4

4 回答 4

12

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

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

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

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

于 2009-12-12T04:53:48.820 回答
7

在 oekaki 世界中，有一些小程序可以做到这一点：Shi Painter 、Chibipaint或PaintBBS。这里有用于集成的 php 类。

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

编辑：另请参阅HTML 5 中制作的。

于 2009-12-07T16:04:35.890 回答
4

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

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

恕我直言，值得一看。

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

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

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

于 2009-12-08T11:52:48.977 回答
0

markup.io使用 mouseup 后应用的算法来做到这一点。

我最近问了一个类似的问题，得到了有趣但不令人满意的答案：有什么方法可以加速 mousemove 事件吗？

于 2011-04-02T22:43:32.177 回答