7

Tenthousandcentsやthesheepmarketのような、ユーザーによる非常に単純な Doodle を受け入れるアプリケーションを作成する必要があります。

たとえば、ユーザーにマウスを使って自分の名前を書いてもらいたいとします。

助言がありますか？

自分でホストする必要さえありません。私が利用できるサービスがどこかに提供されていれば、それで問題ありません。

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 ) にアップロードしました。

PPS。基本的な（しかしほぼ完全な）コントロールである実際の例をアップロードしました。inquisitiveturtleを参照してください。

于 2009-04-07T08:11:00.377 に答える
6

他の回答が述べているように、Flash が最も簡単な方法です。

しかし、キャンバスを除外しないでください。いくつかの気の利いた JavaScript といくつかの独自の MS guff (VML) を使用して、IE でキャンバスの動作をエミュレートできます。

フラッシュがあなたのものではない場合（それは確かに私のものではありません）、これは本当に素晴らしい代替手段になる可能性があります.

于 2009-04-01T18:55:30.230 に答える
4

Flashを使用したくない場合は、他の人が述べているように、おそらくキャンバスが最善の策だと思います。IEでのサポートをエミュレートするプロジェクトがいくつか浮かんでいますが、（私の知る限り）最も完全なプロジェクトはexcanvasです。ビルミルと同様に、 Mozillaにはそれを使用するためのチュートリアルがあります。この（古い）チュートリアルでは、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

別のフラッシュの代替手段であり、たまたま SVG が好きです。

アマルタス SVG Web アプリ

于 2009-04-01T19:00:41.730 に答える
0

1つのオプションは<canvas>、Firefox、Safari、OperaでサポートされているHTML5タグをjavascriptで使用してから、フォームデータで画像をアップロードすることです。

ただし、これによりIEを使用するすべての人がブロックされます。

AdobeFlashはおそらくあなたの最良の選択肢です。

于 2009-04-01T18:32:27.460 に答える
0

iiichan.netにあるものなど、多くのお絵かき実装と同様に、 Shi-painterのような Java アプレットを使用できます。

免責事項: 最近の Java アプレットに関連する汚名は理解していますが、完全を期すためにこれを含めることにしました。;)

于 2009-04-07T08:32:21.170 に答える
0

Tenthousandcents は Adob​​e Flash アプリケーションです。似たようなものを本当に作りたいのであれば、Flash の学習を始めるのが最善の方法です。フレームワークを知らなければ、単純な Doodle を受け入れるのも簡単なことではありません。

于 2009-04-01T18:30:41.787 に答える