2011-07-13 15 views
1

私が望む私はキャンバス(HTML 5)を使用して線を描画していますJavascriptを

をライン座標を取得するライン/形状がキャンバス内のオブジェクトとして格納されていないので、私は(例えばonmouseclick)それにユニークなイベントを添付することはできませんonmouseoverイベントを行に付けるには、Javascriptを使用してCanvasで特定の行(その2つのX座標と2つのY座標を使用している)上にマウスがあるかどうかを知ることによって可能です。異なる線幅のため、この作品でしょう(例:2,5ピクセル)

は、プロジェクト全体が

アドバイスをしてくださいキャンバスの上に構築されているとしてSVGを使用しないようにしたい

あなたはに数学の数式を使用する必要があります
+0

[fabric.js](http://kangax.github.com/fabric.js/demos/kitchensink/)のようなキャンバス抽象化ライブラリを使用することを検討しましたか?それは、クリックやマウスオーバーのようなイベントを観察することを自明にします。 – kangax

答えて

0

線の面積とある点が交差しているかどうかを計算します。

ここで基本的な例は次のとおり

+0

こんにちは、あなたが言及した記事を読んでください(長方形の式を指す)、これは長方形のようですが、ラインのための数式があります – Akash

+0

あなたはそれが異なる幅の線に対して機能したかったので、 rect式。ちょうど1pxよりも太い線は、基本的に塗りつぶされた矩形です:) –

0

isPointInPath(x,y)があります。ポイントが現在のパス上にある場合はtrueを返します。 チェックしたいすべての行についてそれを呼び出さなければなりません。それを行う最善の方法は、描画するのと同時に行うことです。

0

最も良い方法は、いくつかのキャンバスフレームワークを使用することです。 "LibCanvas :: Creating Lines"(キャンバスでdblClickするのを忘れないでください)

関連する問題