交互式(可点击)地图 [英] Interactive(clickable) map

问题描述

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

I have a map of a camping, this is it:

现在，在这张地图上，有很多露营地.并且所有位置(黄色、粉色和黄色条纹)都需要可点击.

Now, on this map, there are a lot of camping places. And all of the places(yellow, pink and the striped yellow), need to be clickable.

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

So my question is, how would i achieve this? I was thinking about using SVG or something. Is this a good solution?

推荐答案

基本思路:创建一个颜色图来查找用户点击了哪个位置.

Basic idea: Create a color map to look up which spot the user has clicked.

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

To create that color map, start with the original map, overlay it with an empty bitmap and write a small tool application to help you:

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

  对于实际应用，你应该

  • 将颜色图保存在内存中
  • 使用 PictureBox 的 MouseClick 来获取地点的坐标
  • 乘以(或者更确切地说是除以)缩放因子
  • 在颜色图上使用GetPixel获取颜色然后
  • 提取位置编号.
  • hold the color map in memory
  • use the MouseClick of a PictureBox to get the coordinates of the place
  • multiply (or rather divide) those with the zoom factor
  • use GetPixel on the color map to get the color and then
  • extract the place number.

  ARGB 颜色有 3 个颜色字节；两个对于位置编号就足够了，并且您仍然有一个字节用于位置的颜色编码类型..

  An ARGB color has 3 color bytes; two will suffice for the place numbers and you will still have one byte for the color coded types of places..

  缩放系数为1f * PictureBox.clientSize.Width/PictureBox.Image.Width.

  为了获得最佳用户体验，我将使用 PictureBox.MouseMove 在颜色图中查找位置并在颜色发生变化时提供反馈，包括设置和清除鼠标光标在Hand和Default之间，只要位置可点击，即在颜色图上有一个不透明的颜色..

  For best user experience I would use the PictureBox.MouseMove to look up the place in the color map and give feedback whenever the color changes, including setting and clearing the mouse cursor betwenn Hand and Default whenever the location is clickable, i.e. has a non-transparent color on the color map..

  为了避免伪影，颜色图必须存储为PNG，而不是JPG！

  To avoid artifacts the color map must be stored asPNG , not as JPG!

  如果您想了解更多有关地点的信息，您可以(并且应该)创建一个 Place 类并保存一个 Dictionary 以查找 按颜色..

  If you want more info with the places you could (and should) create a Place class and hold a Dictionary<Color, Place> to look up Place by Color..

  这篇关于交互式(可点击)地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！