Центральный (x и y) элемент svg между двумя кругами на диагональной линии с javascript

Я уже МНОГО исследовал эту тему.

[ПРИМЕР 1]

Когда объекты прямые, я могу без особых проблем расположить их в центре, используя формулу:

  • targetX: (Circle3X + Circle7X)/2 - (targetWidth/2);
  • targetY: (Circle3Y + Circle7Y) / 2 - (targetHeight / 2)

Затем получаем:

rectSvg.setAttribute("transform", "translate(" + targetX + "," + targetY + ")")

[ПРИМЕР 2]

Проблема возникает, когда элементы круга находятся на диагональной линии, где прямоугольный элемент, который мне нужно расположить, должен быть соответственно повернут. Используя ту же формулу выше, прямоугольный элемент никогда не остается точно в центре между кругами (похоже, что он находится в центре, но это не так). Атрибут преобразования в этом случае:

rectSvg.setAttribute("transform", "translate(" + targetX + "," + targetY + ") rotate(6.2)");

ИЗОБРАЖЕНИЯ ПРИМЕР 1 И ПРИМЕР 2

Ради Бога, кто может помочь мне расположить этот элемент в центре по диагонали?

Примечание. Я создаю svg на сервере (jsdom lib на node.js), поэтому у меня нет клиентских методов, таких как: getBoundingClientRects, getBBox и т. д.

Спасибо вам большое за ваше внимание.

Фрагмент кода расчета X и Y окружностей var circle3X = dom.window.document.getElementById('circle3').getAttribute("cx"); var circle3Y = dom.window.document.getElementById('circle3').getAttribute("cy"); var circle7X = dom.window.document.getElementById('circle7').getAttribute("cx"); var circle7Y = dom.window.document.getElementById('circle7').getAttribute("cy"); var centerX = (circle3X + circle7X) / 2 - (rectWidth / 2); var centerY = (circle3Y + circle7Y) / 2 - (rectHeight / 2);

rectSvg.setAttribute("transform", "translate(" + centerX+ "," + centerY + ") rotate(16.3)");


javascript svg jsdom position math
person nois ae    schedule 17.08.2018    source источник
comment
Не могли бы вы предоставить существующий код в виде фрагмента?   -  person pretzelhammer    schedule 17.08.2018
comment
Привет kfedorov91! Вопрос был отредактирован, как вы просили.   -  person nois ae    schedule 17.08.2018
comment
Пожалуйста, создайте минимально воспроизводимый пример. Если нам нужно проделать большую работу, чтобы воссоздать вашу проблему, вы гораздо меньше скорее всего получить ответ.   -  person Paul LeBeau    schedule 17.08.2018

Ответы (1)


arrow_upward
1
arrow_downward

Насколько я понимаю, объекты типа circle3 описываются прямоугольником, выровненным по оси, но желаемый результат выглядит как наклонный прямоугольник.

Чтобы правильно найти центр этого прямоугольника, вы можете просто использовать центры исходных прямоугольников вместо левых верхних углов.

center1x = top1.x + width1 / 2
center2x = top1.x + height1 / 2
result_center.x = (center1x + center2x) / 2
and similar for y-coordinate

И чтобы получить координаты углов наклонного прямоугольника:

 dist = sqrt((center2y - center1y)^2 + (center2x - center1x)^2)
 ssin = (center2y - center1y) / dist
 ccos = (center2x - center1x) / dist

 corner.x = result_center.x +/- result_width/2 * ccos +/- result_height/2 * ssin
 corner.y = result_center.y -/+ result_width/2 * ssin +/- result_height/2 * ccos

Различные комбинации знаков + и - в первом выражении дают 4 угла. Знаки во втором выражении должны быть изменены соответствующим образом (таким образом допустимы комбинации ++-+, +---, -+++, --+-)

person MBo    schedule 17.08.2018