マウスの座標を測るやつ作りました
お名前は測林蔵(はかりんぞう)です、記事のヘッダー画像は間宮林蔵です。
会社のPCのセキュリティがキツく、UWSCなどでクリックの動作を組み込もうと思うと手入力で座標を入れないといけないため、その補助になるものが欲しくて作りました。
背景にスクショを入れこんで、クリックする座標を測定できます。
作成過程をメモ程度に残しておきます。
jQueryで作成しております、何かの参考になれば幸いです。
基本的には以下の3つの機能で構成されています。
1.マウスの座標を測る機能
2.クリックした時に座標をコピーする機能
3.背景に画像を読み込む機能
■ 1.マウスの座標を測る機能
こちらを参考にいたしました。
▽マウスポインタの座標を取得する
https://javascript.programmer-reference.com/jquery-clinentx-clienty/
(リッチリンクが使えなかったのでテキストリンクです)
ここで取得した数値を使えば、追従してマウス位置を示すこともできます。
通常のマウスカーソルだと中心位置がわかりにくいので、測林蔵ではカーソルを変更して追従するようにしています。
■ 2.クリックした時に座標をコピーする機能
要するにクリックしたときにクリップボードにコピーをしてくれる機能を実装しています。
こちらを参考にいたしました。
大変恥ずかしながら上手く理解できなかったため、上記記事内①をほぼそのまま流用しています。
クリックした際に特定のidが振られているテキストをクリップボードにコピーするので、マウスの座標を表示しているテキストにidを振ってコピーさせています。
■ 3.背景に画像を読み込む機能
canvasを使うのですが、こちらも恥ずかしながらcanvasを使った経験がほとんど無かったので、苦戦しました。
まず画像の読み込みを行います。
ですが、これだと元々のcanvasの大きさに合わせて画像のサイズが変動してしまうので、工夫が必要です。
下記の記事を参考にしたところ、上手く行きました。
attrでサイズを変更すると上手く行くそうです。
すまん！細けぇ意味はよくわかってねぇ！(^q^)
最後に画像を消す動作ですが、実際にはcanvasの描画を消す方法では上手くいきませんでした。
これで一回消してみたのですが、再度画像を読み込ませるとクリアした描画の後ろに画像が回ってしまうようで(よくわかりません)、とにかく思ったようにいきませんでした。
そのため、画像を消す動作は擬似的に行っています。
canvasをopacity:0;にし、再度画像を読み込ませる際にはopacityを戻す、という動作を行っています。
なので再度読み込む際に、一瞬以前の画像が出てしまいますが、まぁ動作的には要件満たしてるように思うのでそのままにしています。
こうして書くとよくわかってないままコピペで使ってる点も多いしドイヒーですが、ちゃんと思ったように作れたので良しとしておきます。
完全に自分用ですが、お役に立てば嬉しいですm(__)m
この記事が気に入ったらサポートをしてみませんか？