Search code examples
wpfshapesvenn

shared area of two shapes in wpf

I'm making an app that is a venn diagram and I don't know how to do the first step. There are to ellipses and I want to color the shared area of two ellipses.

venn diagram

The green area is the shared area I meant.

Solution

  • You can use intersect mode on a combinedgeometry to find the parts overlap:

        <Grid>
    <Grid.Background>
        <VisualBrush Stretch="None">
            <VisualBrush.Visual>
                <Canvas>
                    <Path Fill="Yellow">
                        <Path.Data>
                            <EllipseGeometry Center="150,50" RadiusX="75" RadiusY="75" />
                        </Path.Data>
                    </Path>
                    <Path Fill="Yellow">
                        <Path.Data>
                            <EllipseGeometry Center="50,50" RadiusX="75" RadiusY="75" />
                        </Path.Data>
                    </Path>
                    <Path   Fill="Green">
                        <Path.Data>
                            <CombinedGeometry GeometryCombineMode="Intersect">
                                <CombinedGeometry.Geometry1>
                                    <EllipseGeometry Center="150,50" RadiusX="75" RadiusY="75"/>
                                </CombinedGeometry.Geometry1>
                                <CombinedGeometry.Geometry2>
                                    <EllipseGeometry Center="50,50" RadiusX="75" RadiusY="75"/>
                                </CombinedGeometry.Geometry2>
                            </CombinedGeometry>
                        </Path.Data>
                    </Path>
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </Grid.Background>

    Position textblocks in the grid on top of the background shapes using rows and columns.

    Or just put everything in a canvas rather than using a visualbrush.

    Use Canvas.Left and Canvas.Top to position some textblocks on top of the ellipses.