HTML 5 キャンバスを使用して描画ツールを開発しようとしています。優れた HTML 5 JavaScript ライブラリを探したところ、そのほとんどは静的な画像やアニメーションの生成だけに焦点を当てていました。私が探しているのは、四角形、円などの基本的な形状を描画し、それらにクリック イベントを追加する機能です。ハンドルを使用して形状を変換することもできます。
一部のフレームワークをカスタマイズする必要があるかもしれないことはわかっていますが、それでも..これらの機能を備えた既存のフレームワークがある場合は、知っておくとよいでしょう。ありがとう
【追記】返信ありがとうございます。ところで、SVG は、キャンバス以上のことを計画しているすべてのインタラクティブなものに適しているといくつかの場所で読みました。今、私は完全に混乱しています:(
Paper.js
彼らのウェブサイトによると：
Paper.JSは、HTML5 Canvas 上で実行されるオープン ソースのベクター グラフィックス スクリプト フレームワークです。
と
マウス (またはタッチ スクリーン) で実行できるさまざまなアクションのマウス ハンドラーを提供します。
three.js
javascript の別のグラフィックス ライブラリはthree.jsです。彼らのウェブサイトによると：
このプロジェクトの目的は、複雑さのレベルが非常に低い軽量の 3D ライブラリを作成することです。つまり、ダミー用です。このライブラリは、canvas、svg、および WebGL レンダラーを提供します。
ライブラリでマウス イベントを処理するためのサポートがどれほど優れているかはわかりません。次の SO の質問は、その例を扱っています: Three.js のジオメトリのイベント処理?
これはあなたのニーズに本当に合っているようです: http://fabricjs.com/demos/
マウスで移動およびサイズ変更できる単純な正方形の例を次に示します: http://fabricjs.com/controls/
Fabric.js を使用すると、キャンバス上にオブジェクトを作成して配置できます。単純な幾何学的形状 (長方形、円、楕円、多角形、または数百または数千の単純なパスで構成されるより複雑な形状) などのオブジェクト。
次に、これらのオブジェクトをマウスで拡大縮小、移動、および回転できます。それらのプロパティ (色、透明度、Z インデックスなど) を変更します。これらのオブジェクトをまとめて操作することもできます (単純なマウス選択でグループ化)。
オンサイト説明:
KineticJS は、高パフォーマンスのアニメーション、遷移、ノードのネスト、レイヤー化、フィルタリング、キャッシング、デスクトップおよびモバイル アプリケーションのイベント処理などを可能にする HTML5 Canvas JavaScript フレームワークです。
プリミティブな形状 (長方形、円、さらにはブロブ) を描画でき
ます。多くのイベント ハンドラー (クリック、ホバー、ドラッグなど)
を備えています。また、それらをアニメーション化 (移動、回転、スケーリング)
することもできます。また、フィルター (グレースケール、ぼかし、反転）
ここに多くの例とチュートリアルがあります。スクリーンショットの 1 つを次に示します。
編集
KineticJS はメンテナンスされなくなりました。