代码之家 › 专栏 › 技术社区 › carrier

您建议在浏览器用户绘图中接受什么?

drawing

carrier · 技术社区 · 16 年前

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

例如,我可能希望用户使用鼠标写下自己的名字。

有什么建议吗?

我甚至不需要自己主持。如果某个地方有我可以使用的服务,那就好了。

10 回复 | 直到 16 年前

Jim T 16 年前

只使用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下的文本条)。

无论如何,尽情享受吧。

我上传了一个工作示例,包括Raphael和完整的extjs2库 drop.io (3MB, 7zip )

PPS。我上传了一个工作示例,它是一个基本的(但几乎是一个完整的)控件。见 inquisitiveturtle .

Tom Wright 16 年前

正如其他答案所说,flash是最简单的方法。

但不要把画布排除在外。通过一些漂亮的javascript和一些专有的ms-guff(vml),您可以 emulate canvas behaviour in IE .

如果闪光不是你的东西(它肯定不是我的),那么这可能是一个非常好的选择。

VirtuosiMedia 16 年前

如果你不想使用flash,我想画布可能是你最好的选择,正如其他人提到的。有几个项目在IE中模拟对它的支持,但最完整的项目(据我所知)是 excanvas . Mozilla有一个 tutorial 因为它的使用 Bill Mill . This (旧版)教程讨论了如何将画布与Ajax结合使用。

然而,如果你不想建立自己的能力,你只想拥有这个能力,你可能想看看网上白板 Dabbleboard (具有API)或 skrbl (它有一个可嵌入的小部件)。

carrier 16 年前

到目前为止,我找到的最好和最简单的解决方案是使用如下的方法: http://www.flashnifties.com/flash_guestbook.php

Brian Campbell Dennis Williamson 16 年前

我建议使用 <canvas> 标签;它在Safari、Chrome、Firefox和Opera中本机提供,并可通过使用 ExplorerCanvas 在IE中,它是一个简单的包装器,使IE的VML语言可以从与画布兼容的界面访问。见 this article 有关如何使用 <帆布> 元素。您可以通过以下方式找到许多文档和教程: searching Google .

有一个开放源码 <帆布> 可以播放和下载的基础绘图应用程序 here .

JohnK 16 年前

另一个闪光灯替代品,我正好喜欢SVG。

Amaltas SVG Web App

Greg Noe 16 年前

嗯,十分之一美分是一个Adobe Flash应用程序。如果你真的想做相似的事情,最好的开始学习flash。如果你不了解任何框架,那么接受简单的涂鸦就不容易了。

rmmh CJ Cullen 16 年前

一种选择是使用HTML5 <canvas> 标签,在firefox、safari和opera中支持,使用javascript,然后以表单数据的形式上载图像。

不过,这阻止了所有使用IE的人。

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

Sam Hasler zpesk 16 年前

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

谷歌在火狐、Opera、Chrome和其他浏览器中使用SVG,在Internet Explorer中使用VML,因此您不需要第三方插件。

Rahul 16 年前

你可以使用一个类似Java的小程序 Shi-painter 像许多 oekaki 实现可以,例如 the one at iiichan.net .

免责声明:我现在明白了与Java小程序相关的污名,但我认为为了完整性,我会把它包括在内。;)