Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.12.2017, 01:24
Аспирант
Отправить личное сообщение для милт Посмотреть профиль Найти все сообщения от милт
 
Регистрация: 28.06.2014
Сообщений: 54

Получить координаты текстового узла
Есть например DIV на котором расположено несколько текстовых узлов. Как можно получить координаты этих узлов?
Ответить с цитированием
  #2 (permalink)  
Старый 17.12.2017, 04:43
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,968

Через getClientRects или range и getClientRects.
__________________
29375, 35

Последний раз редактировалось Aetae, 17.12.2017 в 04:51.
Ответить с цитированием
  #3 (permalink)  
Старый 17.12.2017, 18:36
Аспирант
Отправить личное сообщение для милт Посмотреть профиль Найти все сообщения от милт
 
Регистрация: 28.06.2014
Сообщений: 54

Aetae, можете привести пример как это сделать? Допустим если в консоль браузера вставить код
text=document.getElementById('post_message_473080').firstChild;
alert(text.textContent);
то alert() выдаст текст верхнего сообщения на этой странице. Что надо написать чтобы получить координаты того текстового узла?

Последний раз редактировалось милт, 17.12.2017 в 20:16.
Ответить с цитированием
  #4 (permalink)  
Старый 18.12.2017, 04:00
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,968

var text = document.getElementById('post_message_473080').firstChild;
var range = document.createRange();
range.selectNode(text);
var rect = range.getBoundingClientRect();
range.detach();
alert(
    'top: ' + rect.top + 
    '\nleft: ' + rect.left 
);
__________________
29375, 35
Ответить с цитированием
  #5 (permalink)  
Старый 18.01.2018, 17:53
Аспирант
Отправить личное сообщение для милт Посмотреть профиль Найти все сообщения от милт
 
Регистрация: 28.06.2014
Сообщений: 54

Спасибо, работает. Но появился ещё один вопрос. Как у объекта Range узнать координаты граничных точек setStart и setEnd? Ведь текстовый узел не всегда имеет прямоугольную форму, например когда места не хватает и текст переносится на второю строку.
Ответить с цитированием
  #6 (permalink)  
Старый 18.01.2018, 19:39
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,968

var text = document.getElementById('post_message_475649').firstChild;
var range = document.createRange();
range.selectNode(text);
var rects = range.getClientRects(); //большой прямоугольник из маленьких состоит
[].forEach.call(rects, ({top, left, width, height}) => document.body.insertAdjacentHTML(
  'beforeend', 
  `<div style="
    top: ${top}px;
    left: ${left}px;
    width: ${width}px;
    height: ${height}px;
    position: fixed;
    outline:1px dotted rgba(0,0,255,0.5);
  "></div>`
));
range.detach();
__________________
29375, 35

Последний раз редактировалось Aetae, 18.01.2018 в 19:41.
Ответить с цитированием
  #7 (permalink)  
Старый 18.01.2018, 21:35
Аспирант
Отправить личное сообщение для милт Посмотреть профиль Найти все сообщения от милт
 
Регистрация: 28.06.2014
Сообщений: 54

В вашем коде много неизвестных для меня вещей. Может быть мне было бы легче в нём разобраться если бы этот код возвращал какой нибудь результат. Если его ввести в консоль браузера то нечего не происходит.
Ответить с цитированием
  #8 (permalink)  
Старый 18.01.2018, 22:16
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,968

милт, на этой странице запустите код в консоли когда ваш предыдущий(#5) коммент будет в области видимости.)
По сути rects - псевдомассив объектов, содержащих координаты (top, left, width, height, right, bottom) прямоугольников по одному на каждую строчку текста.
Остальное - просто рисование в es6 стиле.)
__________________
29375, 35

Последний раз редактировалось Aetae, 18.01.2018 в 22:22.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как получить координаты яндекс.карт из текстового поля Nesquik Общие вопросы Javascript 0 05.06.2016 17:18
Как получить порядковый номер узла дерева относительно корня Shamandrey ExtJS 2 11.11.2013 08:48
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 03:35
Как получить координаты Dim@ Общие вопросы Javascript 3 30.05.2012 16:54
Получить координаты мыши alekciy Events/DOM/Window 2 27.12.2008 23:07