c# - 从 UI 制作 GeometryDrawing 交互式 map ？ (在 WPF 中与 SVG 图像交互)

Question

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

我知道在 WPF 中，当需要创建交互式 GUI 元素时通常会使用形状，因为它们是 ui 元素，所以它们有各种事件处理优点。遗憾的是，我需要与一组似乎不是为交互而设计的 GeometryDrawings 进行交互。

我的问题:

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

我管理过的:

我设法使用名为 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，所以我应该能够识别形状或几何图形并与之交互。

目前我还没有找到办法，google好像也没有办法帮我找到解决办法。

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

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

非常感谢您的建议。

Answer 1

因此，虽然您的问题过于宽泛而无法给出完整答案(我想如果其他人有这种空闲时间的话)，但我至少可以提供一个与您的目标相关的快速示例。您可以在任何地方使用以下示例并试一试。 PoC 传达的是如何以各种方式与路径交互(鼠标悬停时为红色，单击时为绿色)，但我没有花时间连接任何实际命令或任何东西，因为实际上这会变得更多工作并且我可能会做一些事情，比如将每个形状变成像 ToggleButton 这样的 ButtonBase 类型以保留像 IsChecked 这样的属性，并制作像 Marching Ants 这样更酷的动画。围绕选择等

无论如何，希望这有助于激发创意。用于以下 PoC 的主要工具是 Mike Swanson 的 AI to XAML导出插件和 Blend。希望对您有所帮助，干杯。

视觉示例(抱歉，在断断续续的 gif 中)；

还有一些 XAML 可供您随意使用；

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

抱歉不得不使用 PasteBin 来放置示例，超过了提交答案的字符数限制。