3

在我目前正在制作的游戏中，您处于从节点构建的地图中，当您单击它们时，您正在扭曲到不同的节点。我当前的地图看起来像这样（使用 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

4

1 回答 1

1

您必须计算 svg-group 的边界框并移动组，考虑组本身的外部偏移量和相对于中心节点的内部偏移量。

在此处输入图像描述

假设您希望这个新的随机节点位于组的中心，以红色突出显示。

然后你计算它X与Y容器的关系。比方说X = 400，Y = 200。

然后计算与容器相关的所有地图组的边界框。

在这个例子中，Y1很可能是0，X1你必须找到的地方。尝试使用group.getBoundingClientRect(shallow)，如Two.js 文档中所述。假设'X1 = 300'，'Y1 = 0'。

让你的容器 W(width) = 1000 和 H(height) = 700，让我们计算你的最终坐标：

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

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

这意味着您必须将地图组移动-200（X向左 200）和150（Y向底部移动 150）

于 2019-03-06T15:45:58.540 回答