2

I need to draw a shape on top of a HTML5 canvas with the mouse cursor, like a square or a circle; and it should be resizable, then, when the user has finished with the drawing, the coordinates of the shape inside the canvas should be retrievable.

Any ideas of how can I achieve this using JavaScript?

Thanks

4

2 に答える 2

0

JavaScript ライブラリPaper.jsに興味があるかもしれません。Web サイトのイントロを言い換えると、「これは、HTML 5 Canvas を使用したベクター グラフィックス フレームワークを提供します」

于 2012-05-03T20:45:35.917 に答える
0

Canvas は、描画しているオブジェクトの性質についてまったく何も知りません。つまり、たとえばarcメソッドを呼び出した後は、画面上のピクセルの集まりだけが得られます。

ここには 2 つのアプローチがあります。キャンバスの上に独自のオブジェクト モデル ラッパーを記述できます。何かを描画するたびに、オブジェクト情報 (形状、座標、その他必要なもの) を保存する必要があります。これは非常に適切なアプローチですが、注意してください。考えられるほど簡単ではありません。

2 番目のアプローチは、キャ​​ンバスの代わりに SVG を使用し、ボックスからオブジェクト モデルを取得することです。

于 2012-05-03T08:53:18.140 に答える