Question

我正在开发一款网页游戏，玩家可以在5000,3000公里宽的地图上移动。资源，基数等的坐标在正常的笛卡尔坐标系中作为x，y对存储在数据库中。

当玩家观看他的车辆屏幕时，我想显示他/她附近区域的地图。此示例的此窗口大小为50 km。

我认为svg是我动态渲染这张地图的最佳方式。我没有使用瓷砖地图，因为地形基本上就像一个台球桌（没有特征的平面）。地图将是50公里乘50公里的窗口，其中绘制了兴趣点。

我已经读过你可以根据默认旁边的另一个坐标系（左上角的（0,0））在svg中绘制点。我的问题是，在我的测试平台中，我无法在常规笛卡尔坐标系中渲染一条线。

此代码对我没有任何意义：

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200">
  <g transform="scale(1,-1) translate(0,200)">
    <line x1="20" y1="20" x2="40" y2="40" stroke="red" stroke-width="4" />
  </g>
</svg>

我当时认为逆转y并将其翻译为max y就可以了。

非常感谢您的见解。

Answer 1

在翻译之前缩放时，在缩放后，坐标系中会给出平移坐标。因此，您要将所有内容转换为图像顶部的200像素以上点。你想要做任何一个

transform="scale(1,-1) translate(0,-200)"

或

transform="translate(0,200) scale(1,-1)"

在SVG渲染的游戏地图中绘制笛卡尔坐标

1 个答案: