从UI创建GeometryDrawing交互式地图？ （与WPF中的SVG图像交互）

Question

我是WPF的新手，几天来我一直在努力想弄清楚如何与矢量图像的元素进行交互。在我的例子中是GeometryDrawing元素。

据我所知，在WPF中，当需要创建交互式GUI元素时，通常会使用形状，因为它们是uielements，因此有各种各样的事件处理优点。遗憾的是，我需要与GeometryDrawings集合进行交互，这些集合似乎不是为交互性而设计的。

我的问题：

我需要加载SVG图像并允许用户与其某些元素进行交互。想象一下，加载SVG地图并使一些国家可以点击。

我管理的内容：

我设法使用名为 SvgToXaml 的非常酷的库将SVG转换为xaml。

使用这个库，我可以加载给定的SVG图像并将其转换为xaml。所以我在转换后最终得到类似的东西：

<DrawingImage x:Key="iconDrawingImage">
  <DrawingImage.Drawing>
    <DrawingGroup ClipGeometry="M0,0 V600 H600 V0 H0 Z">
      <DrawingGroup>
        <GeometryDrawing Geometry="F1 M600,600z M0,0z M371.987,227.641C419.615,275.269 457.026,326.349 478.901,371.193 505.259,425.226 508.997,470.915 490.004,489.907 470.211,509.7 421.737,505.791 364.273,476.928 320.828,455.107 272.242,417.809 227.031,372.597 180.677,326.243 142.081,277.052 120.364,232.781 92.884,176.758 90.307,129.038 109.721,109.624 128.559,90.785 172.969,93.568 226.415,119.381 271.574,141.193 323.895,179.548 371.987,227.641z">
          <GeometryDrawing.Pen>
            <Pen Brush="#FFE91E63" Thickness="24" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter" MiterLimit="1" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
        <GeometryDrawing Geometry="F1 M600,600z M0,0z M272.931,201.125C337.983,183.66 400.92,176.771 450.698,180.223 510.672,184.383 552.118,203.97 559.083,229.911 566.342,256.944 538.738,296.984 485.029,332.345 444.421,359.078 387.84,382.533 326.088,399.114 262.776,416.112 200.881,424.972 151.68,421.667 89.42,417.486 46.796,395.878 39.676,369.361 32.769,343.63 57.364,306.55 106.426,273.147 147.879,244.923 207.243,218.761 272.931,201.125z">
          <GeometryDrawing.Pen>
            <Pen Brush="#FFE91E63" Thickness="24" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter" MiterLimit="1" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
    </DrawingGroup>
  </DrawingImage.Drawing>
</DrawingImage>

我使用这个xaml作为图像源，我可以渲染图像，但我还没想出如何与它进行交互。

我认为，因为我将SVG转换为XAML，我应该能够识别形状或几何形状并与之交互。

到目前为止，我还没有找到办法，谷歌似乎无法帮助我找到解决方案。

甚至可以与GeometryDrawing或DrawingImage元素进行交互吗？

在WPF中还有其他方法可以实现吗？我的另一种方法是使用javascript处理HTML来解析SVG并将事件处理程序添加到我需要与之交互的元素中。但我希望使用WPF。

非常感谢你的建议。

Answer 1

因此，虽然你的问题太宽泛而无法得到完整的答案（也许如果其他人有这种空闲时间，我想）但我至少可以提供一个与你的目标相关的快速示例。您可以在任何地方填写以下示例并给它一个镜头。 PoC正在传达的是你如何以各种方式与Path交互（MouseOver上的Red，Click on Green）但是我没有花时间连接任何实际的命令或任何东西，因为实际上这会变成更多的工作和我可能会做一些事情，比如将每个形状转换为类似ToggleButton类型的ButtonBase，以保留IsChecked之类的属性，并在选择等周围制作像Marching Ants这样的更酷的动画。

无论如何，希望这有助于创造灵感。下面用于PoC的主要工具是Mike Swanson的AI to XAML导出插件和Blend。希望它有所帮助，欢呼。

视觉示例（在波涛汹涌的GIF中，抱歉）;

和你一起玩的一些XAML可以在任何地方播放;

PASTEBIN LINK : https://pastebin.com/u6qP2qFt

抱歉，必须使用PasteBin来填充示例，超过了提交答案的字符数限制。