通过UI制作GeometryDrawing交互式地图? (与WPF中的SVG图像进行交互) [英] Make GeometryDrawing interactive map from the UI? (Interact with an SVG image in WPF)

问题描述

我是WPF的新手，我已经努力了几天，以弄清楚如何与矢量图像的元素进行交互.就我而言，是GeometryDrawing元素.

I am new to WPF and I have been trying hard for several days to figure out how to interact with elements of a vector image. In my case GeometryDrawing elements.

我了解到，在WPF中，当需要创建交互式GUI元素时，通常会使用形状，因为它们是uielements，因此在它们上有各种各样的事件处理优点.可悲的是，我需要与似乎不是设计用于交互性的GeometryDrawings集合进行交互.

I understand that in WPF one would normally use shapes when needing to create interactive GUI elements, as they are uielements so there are all sorts of event handling goodness on them. Sadly I need to interact with a collection of GeometryDrawings which don’t seem to be designed for interactivity.

我的问题:

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

I need to load an SVG image and allow the user to interact with some of its elements. Imagine loading an SVG map and make some countries clickable.

我所管理的:

我使用一个非常酷的库 SvgToXaml 将SVG转换为xaml.

I managed to convert the SVG into xaml using a very cool library called SvgToXaml.

使用此库，我可以加载给定的SVG图像并将其转换为xaml.因此，转换后我最终得到了这样的东西:

With this library, I can load a given SVG image and convert it into xaml. So I end up with something like this after the conversion:

<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作为图像源，可以渲染图像，但是我还没有弄清楚如何与元素交互.

I used this xaml as an image source and I can render the image but I have not figured out how to interact with it elements.

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

I thought that because I had the SVG tranlated into XAML I should be able to identify and interact with the shapes or geometries.

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

So far I have not found a way, and google does not seem to be able to help me find a solution.

是否甚至可以与GeometryDrawing或DrawingImage元素全部交互?

Is it even possible to interact with GeometryDrawing or DrawingImage elements all?

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

Is there any other way to achieve this in WPF? My alternative is to work on HTML using javascript to parse the SVG and add event handlers to the elements I need to interact with. But I was hoping to use WPF.

非常感谢您的建议.

推荐答案

因此，尽管您的问题过于笼统，无法完整回答(也许我猜想其他人有这种空闲时间)，但我至少可以提供一个与您的目标有关的快速示例.您可以将以下示例放在任何地方，然后试一试. PoC传达的是您如何以各种方式与Path交互(MouseOver上为红色，Click上为绿色)，但是我没有花时间来连接任何实际的命令或其他任何东西，因为实际上这需要做更多的工作，并且我可能会做一些事情，例如将每个形状变成ToggleButton类型的ButtonBase来保留IsChecked这样的属性，并制作更酷的动画，例如

So while your question is way too broad for a full answer (maybe if someone else has that kind of free time I suppose) but I can at least offer a quickie example related to your goal. You can plop the following example wherever and give it a shot. What the PoC is conveying is how you can interact with a Path in various ways (Red on MouseOver, Green on Click) but I didn't take the time to wire up any actual commands or anything because realistically that becomes a lot more work and I'd likely be doing things like turning each shape into a ButtonBase like ToggleButton type to retain properties like IsChecked and making cooler animations like Marching Ants around the selection etc.

无论如何，希望这有助于获得创意.以下用于PoC的主要工具是Mike Swanson的 AI到XAML 导出插件，以及Blend.希望能帮上忙，欢呼.

Anyway, hope this helps get creative juices flowing. The primary tools used for the PoC below are Mike Swanson's AI to XAML export plugin, and Blend. Hope it helps, cheers.

视觉示例(以断断续续的gif形式表示抱歉)；

Visual Example (in a choppy gif, sorry);

和一些可以与您一起玩的XAML可以放置在任何地方；

and some XAML to play with you can plop wherever;

PASTEBIN链接:https://pastebin.com/u6qP2qFt

对不起，必须使用PasteBin提取样本，超出了字符数限制才能提交答案.

Sorry had to use PasteBin to plop the sample, ran over the character limit for an answer submission.

这篇关于通过UI制作GeometryDrawing交互式地图? (与WPF中的SVG图像进行交互)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！