我是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,所以我应该能够识别形状或几何形状并与之交互。

到目前为止,我还没有找到方法,而Google似乎无法帮助我找到解决方案。

甚至有可能与所有GeometryDrawing或DrawingImage元素进行交互?

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

非常感谢您的建议。

最佳答案

因此,尽管您的问题过于笼统,无法完整回答(也许我猜想其他人有这种空闲时间),但我至少可以提供一个与您的目标相关的示例。您可以随处放置以下示例,并进行尝试。 PoC传达的是您如何以各种方式与Path交互(MouseOver上为红色,Click上为绿色),但是我没有花时间来连接任何实际的命令或其他任何东西,因为实际上这需要做很多工作,并且我可能会做一些事情,例如将每种形状变成ToggleButton类型的ButtonBase来保留IsChecked之类的属性,并围绕选择内容制作诸如Marching Ants之类的更酷的动画等。

无论如何,希望这有助于获得创意。以下用于PoC的主要工具是Mike Swanson的AI to XAML导出插件和Blend。希望能有所帮助,欢呼。

视觉示例(动荡的gif,抱歉);
c# - 通过UI制作GeometryDrawing交互式 map ? (与WPF中的SVG图像进行交互)-LMLPHP

一些XAML可以随身携带;

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

抱歉,必须使用PasteBin放入样本,超出了字符数限制才能提交答案。

关于c# - 通过UI制作GeometryDrawing交互式 map ? (与WPF中的SVG图像进行交互),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43350165/

10-13 00:36