Maydonning oyna koordinatalarini toping
Quyidagi iframe-da yashil “maydon” bilan hujjatni ko’rishingiz mumkin.
O’qlar bilan ko’rsatilgan burchaklarning oyna koordinatalarini topish uchun JavaScript-dan foydalaning.
Qulaylik uchun hujjatda kichik xususiyat mavjud. Istalgan joyga bosish u yerdagi koordinatalarni ko’rsatadi.
Sizning kodingiz oyna koordinatalarini olish uchun DOM dan foydalanishi kerak:
- Yuqori chap, tashqi burchak (bu oddiy).
- Pastki o’ng, tashqi burchak (oddiy ham).
- Yuqori chap, ichki burchak (biroz qattiqroq).
- Pastki o’ng, ichki burchak (bir necha yo’l bor, birini tanlang).
Siz hisoblagan koordinatalar sichqonchani bosish orqali qaytariladigan koordinatalar bilan bir xil bo’lishi kerak.
P.S. Agar element boshqa o’lcham yoki chegaraga ega bo’lsa, hech qanday sobit qiymatlarga bog’lanmagan bo’lsa, kod ham ishlashi kerak.
Tashqi burchaklar
Tashqi burchaklar asosan elem.getBoundingClientRect() dan oladigan narsadir.
Yuqori chap burchakdagi answer1 va pastki o’ng burchakdagi answer2 koordinatalari:
let coords = elem.getBoundingClientRect();
let answer1 = [coords.left, coords.top];
let answer2 = [coords.right, coords.bottom];Chap-yuqori ichki burchak
Bu tashqi burchakdan chegara kengligi bilan farq qiladi. Masofani olishning ishonchli usuli bu clientLeft/clientTop:
let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];O’ng-pastki ichki burchak
Bizning holatda biz tashqi koordinatalardan chegara o’lchamini olib tashlashimiz kerak.
Biz CSS usulidan foydalanishimiz mumkin:
let answer4 = [
coords.right - parseInt(getComputedStyle(field).borderRightWidth),
coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth),
];Chap-yuqori burchakning koordinatalariga clientWidth/clientHeight ni qo‘shish muqobil usul bo‘ladi. Bu, ehtimol, undan ham yaxshiroq:
let answer4 = [
coords.left + elem.clientLeft + elem.clientWidth,
coords.top + elem.clientTop + elem.clientHeight,
];