Получение координат пикселей экрана прямоугольного элемента

#javascript #svg

Вопрос:

Я пытаюсь получить координаты пикселей экрана прямоугольника в SVG с помощью Java script. После щелчка по прямоугольнику я могу определить его ширину, высоту, положение по x и y с помощью getBBox().

Но эти позиции являются исходными позициями. Мне нужно положение экрана.

Например, если я манипулирую viewBox всего SVG, эти координаты getBBox больше не совпадают с пикселями экрана. Существует ли функция или способ получения координат с учетом текущего окна просмотра и размера пикселя элемента svg?

Ответ №1:

Демонстрация:http://phrogz.net/SVG/screen_location_for_element.xhtml

 var svg = document.querySelector('svg');
var pt  = svg.createSVGPoint();
function screenCoordsForRect(rect){
  var corners = {};
  var matrix  = rect.getScreenCTM();
  pt.x = rect.x.animVal.value;
  pt.y = rect.y.animVal.value;
  corners.nw = pt.matrixTransform(matrix);
  pt.x  = rect.width.animVal.value;
  corners.ne = pt.matrixTransform(matrix);
  pt.y  = rect.height.animVal.value;
  corners.se = pt.matrixTransform(matrix);
  pt.x -= rect.width.animVal.value;
  corners.sw = pt.matrixTransform(matrix);
  return corners;
}

Квадраты пурпурного цвета являются разделителями с абсолютным расположением в HTML-элементе, использующими координаты экранного пространства. Когда вы перетаскиваете прямоугольники или изменяете их размер, вызывается эта функция, которая перемещает угловые деления по четырем углам (строки 116-126). Обратите внимание, что это работает, даже если прямоугольники находятся в произвольном вложенном преобразовании (например, синий прямоугольник) и SVG масштабируется (измените размер окна вашего браузера).

Для развлечения перетащите один из прямоугольников за край SVG canvas и обратите внимание, что углы экранного пространства остаются над невидимыми точками.

1. Отличный ответ! Просто и по существу. Я бы с удовольствием добавил больше точек, если бы мог, настолько это полезно.

2. Извините, что возвращаю этот вопрос к жизни, но в настоящее время я пытаюсь получить экранные координаты элемента svg, и мне было любопытно, можно ли получить координаты X / Y из примера выше

3. @k.ken Вот что дает вам код able. Объект JavaScript с четырьмя свойствами, каждое из которых является точкой SVG с координатами x, y.

4. Спасибо за ответ. Координаты не относятся к svg, верно? Просто координаты экрана? Мой вопрос был направлен на получение единственной точки (середины) для прямоугольника, зная его угловые координаты. Быстрый расчет заключается в том, чтобы получить его, используя точки координат nw и se. Это возвращает среднюю координату. Еще раз спасибо за ответ и спасибо за публикацию этого ответа

5. В настоящее время вы можете просто использовать element.getBoundingClientRect()

Ответ №2:

Вы также можете проверить существование elm.getScreenBBox() метода, который делает то, на что это похоже. Это определено в SVG Tiny 1.2.

Смотрите файлы здесь, которые включают резервную реализацию getScreenBBox , которая должна работать во всех браузерах.