平方ユークリッド距離による分割spanのクリック位置算出
https://gyazo.com/26d71c4762e128c0a3c64cdf0a3412a4
絵が描ける！！！
割と実用的な動作をしているのでdenoteでそのまま使っている code:a.js
"use strict";
function click(event) {
event.preventDefault();
if (event.buttons === 0) {
return;
}
.map((element) => {
const rect = element.getBoundingClientRect();
const medX = rect.left + (rect.width / 2);
const medY = rect.top + (rect.height / 2);
const distance = Math.pow(event.clientX - medX, 2) + Math.pow(event.clientY - medY, 2);
}).sort((a, b) => a1 - b1); }
要素ごとにの中央座標を算出
クリック位置との平方ユークリッド距離を算出
平方なのは比較にしか使わないから
距離順でソート
値が最小だった要素に色を付けている
code:a.js
function init() {
const a = Array.from(Array(2000), () => "<span>█</span>").join("") + "<span style='color: black'>a</span>";
document.body.innerHTML = a;
document.body.addEventListener("mousemove", click);
}
document.addEventListener("DOMContentLoaded", init);
code:a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="./a.js"></script>
<style>
* {
overflow-wrap: break-word;
line-height: 1em;
color: white;
}
</style>
<title></title>
</head>
<body>
</body>
</html>
こんな感じでコードを書くとgifのようになる
2000字置いて普通に操作できるなら問題ないと思う
実際に使っていて単純なユークリッド距離の算出じゃだめということがわかった
https://gyazo.com/a6cebfbaf474c82f1f1b9cb4e2d93df8
この赤で囲った辺りをクリックした時に期待した動きをしない
行末にカーソルが行って欲しいけど「単純」辺りにカーソルが飛ぶ
直した
該当の部分はどこをクリックしても、クリック地点の右下に要素が存在しない
1日くらい解決策を考えながら小説読んでたら降ってきた
これを利用してクリック地点の右下に要素の端が存在しない場合は確定で末尾として扱うようにした
まだちょっとおかしいので後でどうにかする
もしかしたら根本から考え直さないといけないかもしれない
末尾要素の右だけを考えたらよかったかも
末尾要素の右だけ見るようにした