7

我需要编写一个应用程序来接受用户非常简单的涂鸦，就像在100 万美元和thesheepmarket中一样。

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

有什么建议么？

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

4

10 回答 10

7

仅使用 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 )。

聚苯乙烯。我上传了一个工作示例，它是一个基本（但几乎是完整的）控件。见好奇乌龟。

于 2009-04-07T08:11:00.377 回答
6

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

但不排除帆布。通过一些漂亮的 javascript 和一些专有的 MS guff (VML)，您可以模拟 IE 中的画布行为。

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

于 2009-04-01T18:55:30.230 回答
4

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

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

于 2009-04-02T06:30:32.507 回答
2

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

于 2009-04-02T15:00:13.657 回答
2

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

有一个开源基础绘图应用程序，您可以在这里<canvas>玩和下载。

于 2009-04-02T15:07:04.747 回答
1

另一种 Flash 替代品，我恰好喜欢 SVG。

Amaltas SVG 网络应用程序

于 2009-04-01T19:00:41.730 回答
0

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

于 2009-04-01T18:30:41.787 回答
0

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

但是，这阻止了每个使用 IE 的人。

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

于 2009-04-01T18:32:27.460 回答
0

您可以看看他们如何在 Google Docs 中绘图：

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

于 2009-04-03T17:58:08.003 回答
0

您可以像许多oekaki实现一样使用像Shi-painter这样的 java 小程序，例如iiichan.net 上的那个。

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

于 2009-04-07T08:32:21.170 回答