mozillaキャンバスのドラッグアンドドロップ

Question

mozilla canvasの描画ペイン（同様のサイズだが、より小さなバージョンのVisioがフローチャートに与えるもの）を実装したい。

サポートはありますか？

今までjQueryを使用して長方形を作成し、移動してきました。これはここでは簡単ですが、ライン（オブジェクト間の接続）を作成するのは本当の苦痛です。私はjavascriptで画素ごとに色を塗るために粗雑な方法を使用していますが、それは良好でもスケーラブルでもなく、また接続をオブジェクトセットなどに固執させるために多くの機能を構築する必要があります。

誰でも知っていますかキャンバスとそこで利用できる機能が私の人生を楽にしてくれるならば。

この場合、より良い解決策が得られるかどうかについての情報があります。 （私はアプレットではないと思っています）

ありがとうございます。それは場合に役立ちます https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

LMK：

Answer 1

は、このリンクに従ってください！
1.作成し、DOMにキャンバスを追加します：

次の手順では、役立つかもしれ
var myCanvas = document.createElement('canvas'); document.body.appendChild(myCanvas);
2.キャンバスの幅と高さ：
myCanvas.width=200; myCanvas.height=200;
3.キャンバスのコンテキストを取得します。その上に描画を開始：四角形を描画する
var gc = myCanvas.getContext('2d');
4.コード：この後
gc.strokeRect(50,50,50,50);
5、mousehandlersを追加します（MOキャンバス上のタッチハンドラー（タッチダウン、タッチモーブ、タッチアップ）を使用して、それに従って動きを処理します。

Answer 2

はい、キャンバスを使用できます。シンプルな図形を描き、スケーリングするのはかなり簡単です。

しかし、図形を描いた後に図形を編集する必要がある場合は、さらに多くの作業をする必要があります。キャンバスはいわゆる「イミディエイトモード」で描画されます。つまり、ペイントした直後にペイントしたものはわかりません。塗装された図形を追跡しません。必要な場合は、それを自分で実装する必要があります。

これは、ユーザーが特定のポイントをクリックしたかどうかをテストするために使用できるisPointInPath()関数を使用して行っています。 MVC-Pattern（Model-View-Controller）を使用してペイントしたオブジェクトを追跡して、どのShapeがクリックされたかを調べることができます。

また、必要なものに非常に近いfabrics.jsを使用することもできます。これらjQueryのプラグインの

Answer 3

のどちらかを描くペインのために素晴らしいです：一般的に描画するための任意のシンプルでさえ複雑な形状

sketch.jsを描画するための

jCanvas。

これらはどちらも応答性と互換性があります。