记录和存储高分辨率的手绘图 [英] Recording and storing high-res hand drawing
问题描述
是否有任何先进的解决方案可以在JavaScript网站上捕捉手绘图（从平板电脑，触摸屏或iPad设备），并将其存储在服务器端？
基本上，这将是一个简单的鼠标绘图画布，其特点是它的分辨率（即它每秒捕捉的鼠标移动次数）需要非常高，否则中的圆形线当快速移动笔/鼠标时，绘图将变成多边形：
（如果情况并非如此，那么@Gregory建议的inputDraw解决方案将是100％完美的。）
>它还必须具有高水平的图形质量，即 penstroke反锯齿。在这里没什么特别的，只有MS Paint风格，1x1像素笔画不会削减它。
我发现这是一个非常有趣的事情，一般来说，随着平板电脑变得至少有点更普遍。 （不是他们得到了我认为他们应得的关注）。
任何建议都非常感谢。我更喜欢开放源代码解决方案，但我也对诸如ActiveX控件或Java Applets等专有解决方案开放。
FF4，Chrome支持是必须的;歌剧，IE8 / 9的支持是必要的。
请注意，大部分画布库和大多数类似于我的问题的答案，请参阅以编程方式在画布上绘图。这是不是我在找什么。我正在寻找记录用户在特定区域绘制的实际笔或鼠标移动的东西。
出于好奇的目的，我怀疑你会得到比onmousemove事件更高的分辨率，而无需在为此目的而自定义的某个嵌入式系统上编写高效的汇编程序。你在操作系统中运行，你按照操作系统的规则来玩，这意味着你受限于操作系统给你的时间片的频率。 （通常约100每秒，流量取决于负载）我没有使用可以克服多边形问题的平板电脑，并且我使用了一些高端平板电脑。 Photoshop用三次插值克服了这个问题。也就是说，除非你有一个非常特殊的平板电脑，它可以捕获许多移动事件，并将它们排列在某个内部缓冲区中，然后在一个内部缓冲区中发送一整包坐标向OS分派数据的时间。尽管我已经看过了平板电脑的API，但它们一次只能提供一组坐标，所以如果发生这种情况，您需要自定义硬件，自定义驱动程序和可以处理多个数据包的自定义apis坐标。
或者您可以使用一个该死的画布标记， onmousemove 事件， event.pageX | pageY some 三次插值，toDataURIapi ，将结果发布到您的php脚本，然后只是说您做了所有其他奇特的事情。
在我的测试中，onmousemove会为您提供每个像素的移动事件，仅受浏览器中事件循环速度的限制。您将获得具有快速移动的稀疏数据点（多边形），并且没有庞大的研究经费和硬件设计人员就可以获得。交易。
Are there any advanced solutions for capturing a hand drawing (from a tablet, touch screen or iPad like device) on a web site in JavaScript, and storing it on server side?
Essentially, this would be a simple mouse drawing canvas with the specialty that its resolution (i.e. the number of mouse movements it catches per second) needs to be very high, otherwise round lines in the drawing will become "polygonal" when moving the pen / mouse fast:
(if this weren't the case, the inputDraw solution suggested by @Gregory would be 100% perfect.)
It would also have to have a high level of graphical quality, i.e. antialias the penstroke. Nothing fancy here but a MS Paint style, 1x1 Pixel stroke won't cut it.
I find this a very interesting thing in general, seeing as Tablet PCs are becoming at least a bit more common. (Not that they get the attention I feel they deserve).
Any suggestions are highly appreciated. I would prefer an Open Source solution, but I am also open to proprietary solutions like ActiveX controls or Java Applets.
FF4, Chrome support is a must; Opera, IE8/9 support is desired.
Please note that most "canvas" libraries around, and most answers to other questions similar to mine, refer to programmatically drawing onto a canvas. This is not what I am looking for. I am looking for something that records the actual pen or mouse movements of the user drawing on a certain area.
Starting a bounty out of curiosity whether anything has changed during the time since this question was asked.
I doubt you'll get anything higher resolution than the "onmousemove" event gives you, without writing an efficient assembler program on some embedded system custom built for the purpose. You run inside an OS, you play by the OS's rules, which means you're limited by the frequency of the timeslices an OS will give you. (usually about 100 per second, fluxuating depending on load) I've not used a tablet that can overcome the "polygon" problem, and I've used some high end tablets. Photoshop overcomes the problem with cubic interpolation.
That is, unless, you have a very special tablet that will capture many movement events and queue them up to some internal buffer, and send a whole packet of coordinates at a time when it dispatches data to the OS. I've looked at tablet api's though, and they only give one set of coordinates at a time, so if this is going to happen, you'll need custom hardware, and a custom driver, and custom apis that can handle packets of multiple coordinates.
Or you could just use a damned canvas tag, the onmousemove event, event.pageX|pageY some cubic interpolation, the "toDataURI" api of canvas, post the result to your php script, and then just say you did all that other fancy stuff.
onmousemove, in my tests, will give you one event per pixel of movement, limited only by the speed of the event loop in the browser. You'll get sparse data points (polygons) with fast movement and that's as good as it gets without a huge research grant and a hardware designer. Deal.
这篇关于记录和存储高分辨率的手绘图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
