在我正在制作的游戏中,你将置身于一个由节点构成的地图中,当你点击节点时,你会传送到不同的节点。我的当前地图看起来像这样(使用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](https://istack.dev59.com/IjRz5.webp)
![enter image description here](https://istack.dev59.com/WyjLK.webp)
![enter image description here](https://istack.dev59.com/QwfnL.webp)
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