フィールドのウィンドウ座標を見つける
重要性: 5
下の iframe では、緑の “フィールド” を持つドキュメントがあります。
矢印でポイントされた角のウィンドウ座標を見つけるために、JavaScript を使用してください。
便宜のために、ドキュメント上に実装している小さな機能があります。任意の場所をクリックすると、そこの座標を表示します。
あなたのコードは次のウィンドウ座標を取得するために DOM を使う必要があります:
- 左上の外部の角(それはシンプルです)
- 右下の外部の角(これもシンプルです)
- 左上の内部の角(少し難しいです)
- 右下の内部の角(いくつか方法があり、１つを選んでください)
あなたが計算する座標は、マウスクリックで返却されるものと同じであるべきです。
P.S. コードは要素が別のサイズやボーダーの場合でも動作する必要があります。任意の固定値で束縛しないでください。
外部の角
外部の角は基本的に elem.getBoundingClientRect() から取得したものです。
左上の角 answer1 と、右下の角 answer2 の座標は:
let coords = elem.getBoundingClientRect();
let answer1 = [coords.left, coords.top];
let answer2 = [coords.right, coords.bottom];左上の内部の角
それはボーダーの幅が外部の角とは異なります。その距離を取得する信頼できる方法は clientLeft/clientTop です。:
let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];右下の内部の角
我々のケースでは、外部の座標からボーダーのサイズを減算する必要があります。
CSS の方法を使用することができます:
let answer4 = [
coords.right - parseInt(getComputedStyle(field).borderRightWidth),
coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
];代わりの方法は clientWidth/clientHeight を左上の角の座標に足す方法です。おそらくこれはより良い方法でしょう。:
let answer4 = [
coords.left + elem.clientLeft + elem.clientWidth,
coords.top + elem.clientTop + elem.clientHeight
];