HOME

canvas 要素のマウス座標(位置)の取得 A

{ svg, javascript で作成したプログラム一覧 }

推奨 ブラウザ : chrome

2017/07/08

2017/07/10

canvas 要素のマウス座標(位置)を取得して、
座標の値を内包している要素(Object)の x, y, width, height の範囲の色を再描画します。
mouseover, mouseout イベントの時は、
canvas 要素の mousemove イベントから座標を取得して、
座標の値を内包している要素(Object)、
又は、座標から外れている要素を
ループ処理で調べて、その後、登録されたイベントを実行しています。
click は、canvas 要素の click イベント時の座標を取得して処理しています。
canvas 上でクリックすると、マウス座標の下の色をテキストボックスに書き出します。
この色は、canvas のピクセルデータを取得したものではなく、
予め登録していたカラーコードです。

2017/07/08
上記のプログラムは、要素をクリックした場合の
ダウンイベントの要素と、アップイベントの要素が違っていてもイベントを実行してしまいます。
下のプログラムではダウンと、アップの要素が同じ場合にイベントを実行するようにしました。
また、要素が重なっている場合の処理を追加してみました。
要素のマウス座標を取得して、座標の値を内包している要素を取得、
矩形の当たり判定を使用して、
その要素に重なっている要素を取得、その要素に重なっている要素を取得・・・繰り返し・・・
再描画に必要最低限の範囲を取得して、再描画するはずだったのですが、、、
要素の取得方法がまずいらしく、再描画に失敗することがあります。
いろいろ試したのですが、修正出来ていません。

2017/07/10
描画する前の値を出力して、確認した所、
indexOf を使用して、同じ要素の当たり判定を繰り返さないようしていた所で、
おかしなことをやってました。
要素の持つ位置情報(インデックス)を空白で区切ってたのですが、
これでは、当たり判定の検索漏れが起こるわけです。。。
'25 5 11' で '5' の検索。。。これじゃ。。。_( _´ω`)_
';25;5;11;' で ';5;' で検索するようにしました。
確認した範囲では、再描画の失敗が無くなったようです。
いきなり、多量の要素を作り、思い込みだけで、
プログラムを書いたのが失敗です。
少量の要素数で確認してから、です。

要素の数が少ない、重なっている要素の数が少ない時は、
この方法でいいのかもしれませんが、
要素数が多い、重なっている要素の数が多い時は、
全てを再描画した方が、効率が良いのかもしれません。

数学の勉強をやり直ししてたりします。_´ω`)_