Установить центральную точку для группы SVG с помощью JavaScript - PullRequest
Новая
       21

Установить центральную точку для группы SVG с помощью JavaScript

0 голосов
/ 25 февраля 2019

В игре, которую я сейчас делаю, вы находитесь на карте, которая построена из узлов, и вы переходите на разные узлы, когда нажимаете на них.Моя текущая карта выглядит так (создается с two.js, это группа svg, где каждый круг и линия - это элемент пути svg, например: 

<path transform="matrix(1 0 0 1 553 120)" d="M 8 0 C 8 2.02 7.085 4.228 5.656 5.656 C 4.228 7.085 2.02 8 0 8 C -2.021 8 -4.229 7.085 -5.657 5.656 C -7.086 4.228 -8 2.02 -8 0 C -8 -2.021 -7.086 -4.229 -5.657 -5.657 C -4.229 -7.086 -2.021 -8 -0.001 -8 C 2.02 -8 4.228 -7.086 5.656 -5.657 C 7.085 -4.229 8 -2.021 8 0 Z " fill="#003251" stroke="#ebebeb" stroke-width="1" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" id="19"></path>

И карта выглядит так: game map

Помеченный красным узлом является индикатором вашей текущей позиции в зоне / карте. Как я могу изменить положение группы SVG, чтобы текущая позиция игрока всегда была в центре смещения контейнера?вся карта влево / вправо / верх / низ и становится такой: enter image description here enter image description here

Используя следующую функцию, я могу изменить x, y координаты группы svg: 

function shiftMap(id_attr, offsetX, offsetY) {
    let elem = $(id_attr);
    if (elem) {
        let params = ' translate(' + offsetX + ',' + offsetY + ')';
        elem.attr('transform', params);
    }
}

У меня также есть функция для определения координат узла текущей позиции игрока, поэтому я попытался сделать: 

//where playerPosX = X of the current player node location (red mark)
//and playerPosY = Y of the current player node location (red mark)
shiftMap("svgMapID", playerPosX, playerPosY);

К сожалению, позиция неточный и карта перемещается / перемещается везде, выходит за пределы контейнера и т. д. Любая помощь очень ценится. Спасибо!

Подсказка: это может быть возможно сделать через точку привязки twojs, но я не уверенкак. Больше информации здесь: https://two.js.org/#two-anchor

1 Ответ

0 голосов
/ 06 марта 2019

Вы должны вычислить ограничивающую рамку вашей svg-группы и переместить группу, учитывая внешние смещения самой группы и внутренние смещения относительно вашего центрального узла.

enter image description here

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

Затем вы вычисляете его X и Y, связанные с контейнером.Допустим, что X = 400, Y = 200.

Затем вы вычисляете ограничивающую рамку для всей вашей группы карт, связанной с контейнером.

В этом примере Y1, вероятно, будетбыть 0, где X1 вы должны найти.Попробуйте использовать group.getBoundingClientRect(shallow), как описано в Two.js docs .Допустим, что «X1 = 300», «Y1 = 0».

Имея ваш контейнер W (ширина) = 1000 и H (высота) = 700, давайте вычислим ваши окончательные координаты:

finalX= (W/2) - (X + X1) = 500 - 700 =-200

finalY= (H/2) - (Y + Y1) = 350 - 200 =150

Это означает, что вам нужно переместить группу карт -200 на X (200 влево) и 150 на Y (150 в низ)

...