对于接受浏览器内用户绘图，您有什么建议？答案

【问题标题】：What do you recommend for accepting in-browser user drawings?对于接受浏览器内用户绘图，您有什么建议？
【发布时间】：2009-04-08 03:37:18
【问题描述】：

我需要编写一个接受用户非常简单的涂鸦的应用程序，类似于tenthousandcents 和thesheepmarket。

例如，我可能希望用户使用鼠标写下他们的名字。

有什么建议吗？

我什至不需要自己主持。如果在某个地方提供了我可以使用的服务，那很好。

【问题讨论】：

标签： drawing

【解决方案1】：

仅使用 html 组合一个基本的涂鸦应用程序并不难。我会让你制定出准备生产的细节。

我在这里使用extjs 作为跨浏览器事件框架，但你可以使用任何你喜欢的东西（jquery）。我还使用Raphael 来获得跨浏览器绘图功能。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>TestPage</title>
    <script language="javascript" src="raphael-src.js"></script>
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script language="javascript">


    scribbler = function (container, width, height) {
      this.canvas = Raphael(container, width, height);

      this.currentdraw = null;

      Ext.get(container).on('mousedown', function(e) {
            var el = Ext.get(container);
            this.currentdraw = this.canvas.path({ stroke: "black", fill: "none", "stroke-width":4 });
            this.currentdraw.moveTo(e.getPageX() - el.getLeft(), e.getPageY() - el.getTop());
      }, this);      

      Ext.get(container).on('mousemove', function(e) {
            var el = Ext.get(container);
            if (this.currentdraw != null)
            {
                this.currentdraw.lineTo(e.getPageX() - el.getLeft(), e.getPageY() - el.getTop());
            }
      }, this);      

      Ext.get(container).on('mouseup', function(e) {
            this.currentdraw = null;
      }, this);      

    }

    var scribble;
    Ext.onReady( function() 
        {
            scribble = new scribbler("container", 800,600);
        }
    );

    </script>

  </head>

  <body>
    <div id="container" style="position:relative;border:1px solid black;width:640px;height:400px">
    </div>
  </body>
</html>

您必须将各种涂鸦线记录并存储在表单中以供提交。并确保鼠标指针始终正确（IE下是文本栏）。

不管怎样，享受吧。

PS。我已经上传了一个工作示例，包括 raphael 和完整的 extjs2 库到drop.io（3Mb，7zip）。

PPS。我上传了一个工作示例，它是一个基本（但几乎是完整的）控件。见inquisitiveturtle。

【讨论】：

您不会碰巧能够详细说明涂鸦线条的记录和存储吧？这看起来很适合我的需求。
嗯，是的，这很有趣 :) 查看额外的 PPS。
对于使用最新 Raphaël 版本的用户的注意事项：path.moveTo()、path.lineTo() 函数不再包含在 Raphaël 核心中。它现在是一个名为 raphael.path.methods.js 的插件，可以在以下位置找到：github.com/DmitryBaranovskiy/raphael/tree/master/plugins

【解决方案2】：

正如其他答案所述，Flash 将是最简单的方法。

但不要排除画布。通过一些漂亮的 javascript 和一些专有的 MS guff (VML)，您可以emulate canvas behaviour in IE。

如果 flash 不是你的东西（它肯定不是我的），那么这可能是一个非常好的选择。

【讨论】：

【解决方案3】：

如果您不想使用 Flash，我认为画布可能是您最好的选择，正如其他人所提到的。有一些项目在 IE 中模拟对它的支持，但最完整的一个（据我所知）是excanvas。 Mozilla 有一个 tutorial 用于使用它，Bill Mill 也是如此。 This（较早的）教程讨论了如何将画布与 AJAX 结合使用。

但是，如果您不想构建自己的并且只想要该功能，则可能需要查看在线白板，例如 Dabbleboard（具有 API）或 skrbl（具有可嵌入的小部件） )。

【讨论】：

【解决方案4】：

到目前为止，我发现的最好和最简单的解决方案是使用这样的东西： http://www.flashnifties.com/flash_guestbook.php

【讨论】：

【解决方案5】：

我建议使用<canvas> 标签；它可以在 Safari、Chrome、Firefox 和 Opera 中本地使用，并且可以通过在 IE 中使用 ExplorerCanvas 来使用，这是一个简单的包装器，它使 IE 的 VML 语言可以从画布兼容的界面访问。有关如何使用 <canvas> 元素制作绘图应用程序的教程，请参阅 this article。您可以通过searching Google 找到很多文档和教程。

有一个开源的<canvas> 基础绘图应用程序，您可以玩并下载here。

【讨论】：

【解决方案6】：

另一种 Flash 替代品，我只是碰巧喜欢 SVG。

Amaltas SVG Web App

【讨论】：

【解决方案7】：

嗯，一万分是一个 Adobe Flash 应用程序。如果您真的想制作类似的东西，最好的起点是开始学习 Flash。如果您不了解任何框架，那么即使是简单的涂鸦也很难接受。

【讨论】：

我可以学习 Flash...但是因为我只是想快速临时应用它，所以我就是不喜欢它。我只是想应该有一些我可以插入和使用的预制件。

【解决方案8】：

一种选择是使用 HTML5 <canvas> 标记，在 Firefox、Safari 和 Opera 中支持 javascript，然后以表单数据的形式上传图像。

不过，这会阻止所有使用 IE 的人。

Adobe Flash 可能是您的最佳选择。

【讨论】：

【解决方案9】：

你可以看看他们是怎么做的Drawing in Google Docs：

Google 在 Firefox、Opera、Chrome 和其他支持它的浏览器中使用 SVG，在 Internet Explorer 中使用 VML，因此您不需要第三方插件。

【讨论】：

【解决方案10】：

您可以像许多oekaki 实现一样使用Shi-painter 之类的Java 小程序，例如the one at iiichan.net。

免责声明：我了解这些天与 Java 小程序相关的污名，但为了完整起见，我想我会包括这个。 ;)

【讨论】：