JavaScript：クリックイベントからの範囲測定とライン計測

Question

私はキャンバスを持っていて、このキャンバスの中に画像やその他のものがあります。それに加えて、測定ツールがあります。キャンバス。

1. ラインの測定：今、私は2つの異なるモードで動作するように測定ツールを必要とする これは2回のクリックによってトリガされ、最初の行の最初の点を決定]をクリックし、第二のクリックでの終点を決定しますライン。
   
   
2. 面積測定：これは、次のように1回のクリックでトリガーされます。
   a。 mouseDown：領域の最初の点を決定します。
   b。 mouseMove：マウスがダウンしているときの領域を選択します。
   c。 mouseUp：領域の終点を決定します。

私は両方の方法でトリガーしようとしましたが、最良の方法はまだいくつかの問題があります。

私のアプローチ：

Event.on(canvas,"mousedown", mousedown); 
Event.on(canvas,"mousemove", mousemove); 
Event.on(canvas,"mouseup", mouseup); 

イベントを定義するにはYUIのLIBを使用して、これらの3人のイベントリスナーを定義します。

• マウスダウン：この機能では、私は（Date.nowを格納する）と、最初面積測定を設定します。 300ms後にsettimeoutコールバックに加えて、マウスがまだダウンしているかどうかをチェックし、もしそうなら、エリア測定にモードを設定します。

• マウス移動：選択したモードを描画します。

• ここでは、クリックが300ms未満の場合、Date.now（）をチェックし、モードを行に変換してMouseMove（）を呼び出します。

---

しかし、このアプローチは、最初の300msの中にいくつかの問題を持って、その曖昧なユーザが希望するモード。私のアプローチを使用すると、コードは300ms後にモードを知っていますが、300ms前にはそれを知ることはできません。

このアプローチを改善したり、新しいものを設定するのに役立ちますか？

Answer 1

クリックをドラッグから区別する方法を示すこの回答をご覧ください。 How to distinguish mouse "click" and "drag"

ユーザーが移動する速さに依存してはならない2つの異なるものがすべて同じように見えます。

をクリックし、クリックしてください=測定距離

のMouseDown、ドラッグ、のMouseUp =測定エリア