使用JavaScript为SVG组设置中心点

Question

在我正在制作的游戏中，你将置身于一个由节点构成的地图中，当你点击节点时，你会传送到不同的节点。我的当前地图看起来像这样（使用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>

这是地图的样子： 红色标记表示您在区域/地图上的当前位置指示器。如何重新定位SVG组，以使当前玩家位置始终位于容器的中心，并将整个地图向左/右/上/下移动，变为以下样子： 使用以下函数可以更改SVG组的x、y坐标：

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

- Jakub Moz

Answer 1

你需要计算svg组的边界框并移动该组，考虑到组本身的外部偏移和相对于中心节点的内部偏移。

假设您希望将此新的随机节点放置在组的中心，并以红色突出显示。

然后，您需要计算其相对于容器的X和Y。假设X = 400，Y = 200。

接下来，您需要计算与容器相关的所有地图组的边界框。

在此示例中，Y1可能是0，而您需要找到X1。尝试使用group.getBoundingClientRect(shallow)，如Two.js docs中所述。假设'X1 = 300'，'Y1 = 0'。

假设您的容器宽度为1000，高度为700，则可以计算出最终坐标：

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

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

这意味着您需要将地图组向左移动-200个单位并向下移动150个单位。

- Alex Under