Question

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

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

有什么建议吗？

我甚至不需要自己主持。如果有某些地方提供的服务我可以使用，这很好。

Answer 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。

Answer 2

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

但不要将画布排除在外。通过一些漂亮的javascript和一些专有的MS guff（VML）你可以emulate canvas behaviour in IE。

如果闪光不是你的东西（它肯定不是我的）那么这可能是一个非常巧妙的选择。

Answer 3

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

但是，如果您不想构建自己的并且只是想要这种能力，那么您可能需要查看在线白板，例如Dabbleboard（具有API）或skrbl（其中有一个可嵌入的小部件。）

Answer 4

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

Answer 5

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

您可以使用开源<canvas>基础绘图应用程序并下载here。

Answer 6

另一种闪光选择，我碰巧喜欢SVG。

Amaltas SVG Web App

Answer 7

嗯，成千上万的人是Adobe Flash应用程序。如果你真的想要做类似的东西，最好的开始就是开始学习Flash。如果您不了解任何框架，那么即使接受简单的涂鸦也不会有任何容易的事情。

Answer 8

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

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

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

Answer 9

您可以查看他们的行为Drawing in Google Docs：

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

Answer 10

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

免责声明：我理解这些天与Java小程序相关的耻辱，但我认为为了完整起见我会包括这个。 ;）

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

10 个答案: