在 SVG 渲染的游戏地图中绘制笛卡尔坐标
我正在开发一款网页游戏，玩家可以在 5000,3000 公里宽的地图上移动。资源、基地等的坐标以普通笛卡尔坐标系中的 x,y 对的形式存储在数据库中。
当玩家查看他的车辆屏幕时，我想显示他/她附近区域的地图。本例中窗口的大小为 50 公里。
我认为 svg 是我动态渲染这张地图的最佳方式。我没有使用平铺地图，因为地形基本上就像台球桌（平坦，没有任何特征）。该地图将只是 50 公里 x 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 就可以了。
我们将非常感谢您的见解。
I am developing a web game where players are moving around on a map that is 5000,3000 km wide. The coordinates of resources, bases, etc. are stored in the database as x,y pairs in a normal Cartesian coordinate system.
When a player views his vehicle screen, I want to display a map of the area in his/her vicinty. The size of this window for this example would be 50 km.
I think that svg is the best way for me to render this map on the fly. I am not using a tile map as the terrain is basically like a pool table (flat with no features). The map will be just the 50km by 50 km window with points of interest plotted in it.
I have read that you can plot points in svg based upon another coordinate system beside the default one ((0,0) in the top left). My problem is that in my testbed I cannot render a line in a regular Cartesian coordinate system.
This code plots nothing for me:
<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>
I was thinking that reversing y and translating it to max y would do the trick.
Your insights would be greatly appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
当您在平移之前进行缩放时，平移坐标将在缩放后的坐标系中给出。因此，您要将所有内容平移到图像顶部上方 200 像素的点。你想做
或
When you scale before you translate, the translation coordinates are given in the coordinate system after scaling. So you're translating everything to a point 200 pixels above the top of the image. You want to do either of
or