嵌套WPF路径

Question

我正在尝试为我在WPF中工作的应用程序创建一个维恩图控件。我现在只想创建一个双向维恩，所以两个圈子相互重叠。

我试图让两个功能工作：
1.控件必须调整Venn的大小以填充可用空间。
2.维恩的每个部分都应该带有鼠标输入以及不同的颜色。

我只是没有在同一时间做这两个...

目前我的代码看起来是这样的：

<Grid> 
<Path Stretch="Uniform" Fill="Blue" > 
    <Path.Data> 
    <GeometryGroup> 
     <CombinedGeometry GeometryCombineMode="Exclude" > 
     <CombinedGeometry.Geometry1> 
      <EllipseGeometry Center="-25, 0" RadiusX="50" RadiusY="50"/> 
     </CombinedGeometry.Geometry1> 
     <CombinedGeometry.Geometry2> 
      <EllipseGeometry Center="25, 0" RadiusX="50" RadiusY="50"/> 
     </CombinedGeometry.Geometry2> 
     </CombinedGeometry> 
     <CombinedGeometry GeometryCombineMode="Exclude" > 
     <CombinedGeometry.Geometry1> 
      <EllipseGeometry Center="25, 0" RadiusX="50" RadiusY="50"/> 
     </CombinedGeometry.Geometry1> 
     <CombinedGeometry.Geometry2> 
      <EllipseGeometry Center="-25, 0" RadiusX="50" RadiusY="50"/> 
     </CombinedGeometry.Geometry2> 
     </CombinedGeometry> 
     <CombinedGeometry GeometryCombineMode="Intersect"> 
     <CombinedGeometry.Geometry1> 
      <EllipseGeometry Center="-25, 0" RadiusX="50" RadiusY="50"/> 
     </CombinedGeometry.Geometry1> 
     <CombinedGeometry.Geometry2> 
      <EllipseGeometry Center="25, 0" RadiusX="50" RadiusY="50"/> 
     </CombinedGeometry.Geometry2> 
     </CombinedGeometry> 
    </GeometryGroup> 
    </Path.Data> 
</Path> 

正如你可以看到我使用几何对象为我的维恩部分，但我想有路径对象，以便我可以支持交互和样式。这可能吗？有没有更好的方法来做到这一点？

谢谢！

Answer 1

如果您将每个CombinedGeometry对象用作单独路径的数据，则可以获得不同的交互和颜色。为了使其正确调整大小，可以将Grid放入ViewBox而不是在路径上设置Stretch。这不会改变原点，因此您需要将椭圆移到以（50,50）和（100,50）为中心。

<Viewbox> 
    <Grid> 
     <Path Fill="Blue"> 
      <Path.Data> 
       <CombinedGeometry GeometryCombineMode="Exclude"> 
        <CombinedGeometry.Geometry1> 
         <EllipseGeometry Center="50, 50" RadiusX="50" RadiusY="50"/> 
        </CombinedGeometry.Geometry1> 
        <CombinedGeometry.Geometry2> 
         <EllipseGeometry Center="100, 50" RadiusX="50" RadiusY="50"/> 
        </CombinedGeometry.Geometry2> 
       </CombinedGeometry> 
      </Path.Data> 
     </Path> 
     <Path Fill="Red"> 
      <Path.Data> 
       <CombinedGeometry GeometryCombineMode="Exclude" > 
        <CombinedGeometry.Geometry1> 
         <EllipseGeometry Center="100, 50" RadiusX="50" RadiusY="50"/> 
        </CombinedGeometry.Geometry1> 
        <CombinedGeometry.Geometry2> 
         <EllipseGeometry Center="50, 50" RadiusX="50" RadiusY="50"/> 
        </CombinedGeometry.Geometry2> 
       </CombinedGeometry> 
      </Path.Data> 
     </Path> 
     <Path Fill="Purple"> 
      <Path.Data> 
       <CombinedGeometry GeometryCombineMode="Intersect"> 
        <CombinedGeometry.Geometry1> 
         <EllipseGeometry Center="50, 50" RadiusX="50" RadiusY="50"/> 
        </CombinedGeometry.Geometry1> 
        <CombinedGeometry.Geometry2> 
         <EllipseGeometry Center="100, 50" RadiusX="50" RadiusY="50"/> 
        </CombinedGeometry.Geometry2> 
       </CombinedGeometry> 
      </Path.Data> 
     </Path> 
    </Grid> 
</Viewbox>