ユーザーがビデオにゾーン (ポリゴン) を描画できる Web アプリケーションを構築しています。私がすでに実装した解決策<div>は、ビデオ プレーヤーの上に を配置して、マウス クリックをキャッチすることでした。
私が今やりたいことは<div>、マウスでそれを描くことができることです:
- ブロックをクリックして点を描きます
- 既存の点で多角形を塗りつぶすボタンDraw zone 。
- ブロックをリセットするボタンDelete canvas 。
どのライブラリを使用するかについての指示を探しています。すでに聞いたことがあります：
- ラファエル ( raphaeljs.com/#demo )
- jsDraw2D ( jsdraw2d.jsfiction.com/demo/linepolygon.htm )
問題
Raphael は怪物に見えますが、私がやりたいことにはちょっとやり過ぎです。それどころか、jsDraw2D は、私がテストしたものからうまく動作しているようです (ただし、手動で描画しただけです)。
次のようないくつかの制約があります。
- ユーザーはマウスで (クリックして) ポイントを描いています。
- ユーザーは
<div>不透明度をオンにして描画しています（塗りつぶされたポリゴンも透明にする必要があります） - ポイントの座標（または少なくともポリゴンの座標）を保存する必要があります
質問
何を使えばいいですか？実装が少し難しい (基本的に JavaScript のバックグラウンドがない) 場合でも、Raphael に固執する必要がありますか? または、jsDraw2D が行うことを実行できる JavaScript ライブラリを知っていますか?
ありがとう、