互动（可点击）地图

Question

我有一张露营地图，就是这样：

现在，在这张地图上，有很多露营场所。所有的地方（黄色，粉红色和条纹黄色）都需要点击。

所以我的问题是，我将如何实现这一目标？我在考虑使用SVG或其他东西。这是一个很好的解决方案吗？

Answer 1

如果您将图片放在window.location.pathname.split('/').pop()中，比如说，您可以使用PictureBox事件。

Answer 2

基本理念：创建颜色地图以查找用户点击的地点。

要创建该颜色贴图，请从原始贴图开始，使用空位图覆盖它并编写一个小工具应用程序来帮助您：

• 它应该让你为每个站点点画一个特殊颜色的实心圆圈
• 理想情况下，这些颜色应该允许您重新构建地点的数量和类型
每次点击时
• 应准备下一种颜色
• 你不需要太精确地匹配这个地方，但你应该用油漆程序改进色彩图;将原始地图放在它下面的一层中，然后使用吸管工具获得正确的颜色，然后将地方画得更好
• 因为很多地方都有连续的数字
  • 每次点击都会计算出来
  • 使用输入框设置新的起始编号

对于实际应用，你应该

• 将颜色映射保存在内存中
• 使用MouseClick的{​​{1}}来获取地点的坐标
• 使用缩放系数
乘以（或者更确切地划分）
• 在颜色图上使用PictureBox获取颜色，然后
• 提取地点编号。

GetPixel颜色有3个颜色字节;两个就足够了地方编号，你仍然会有一个字节用于颜色编码类型的地方..

缩放系数为ARGB。

为了获得最佳用户体验，我会使用1f * PictureBox.clientSize.Width / PictureBox.Image.Width在颜色地图中查找地点，并在颜色发生变化时提供反馈，包括设置和清除PictureBox.MouseMove只要位置可点击，即mouse cursor和Hand，即彩色地图上的颜色不透明。

为避免瑕疵，色彩图必须存储为Default，而不是PNG！

如果您想了解更多关于这些地方的信息，您可以（并且应该）创建JPG课程并按住Place以Dictionary<Color, Place>来查找Place .. < / p>