如何在 WPF 中创建一个带孔的圆? [英] How to create a circle with a hole in a circle in WPF?

问题描述

我创建了一个 UserControl，它是一个环，通过叠加 2 个圆圈，小圆圈为空白，第二个圆圈位于最小圆圈后面.

在我的 WPF 应用程序中，我想放置几个环，但小圆圈确实隐藏了其他环.我想看穿它，并在其他戒指后面捕捉鼠标事件，否则它不是真正的戒指.有可能吗?

我尝试了 OpacityMask 用于小椭圆，正如对

如:

<Path Fill="Red" Stroke="Black"><路径.数据><CombinedGeometry GeometryCombineMode="Xor"><CombinedGeometry.Geometry1><EllipseGeometry RadiusX="75" RadiusY="75" Center="75,75"/></CombinedGeometry.Geometry1><组合几何.几何2><EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75"/></CombinedGeometry.Geometry2></组合几何></路径.数据></路径>

然后 IsHitTestVisible="False" 应该在需要时防止鼠标干扰.

I have created a UserControl which is a ring by superposing 2 circles the small circle being blank and the second behind the smallest being colored.

In my WPF app, I want to put several rings but the small circle does hide other rings. I'd like to see through it and also capture mouse event for ring behind other rings otherwise it's not real rings. Is it possible ?

I tried OpacityMask for small ellipse as pointed by answer to http://social.msdn.microsoft.com/forums/en-US/wpf/thread/551201d1-c5b3-4e17-ae63-625cfbb8bcc4 but still can't see ring behind hole:

<UserControl x:Class="MyUserControls.MyRing"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="150" d:DesignWidth="150" SizeChanged="UserControl_SizeChanged">
    <Grid Height="150" Name="Grid" Width="150" MouseMove="ellipse1_MouseMove">
        <Ellipse Fill="Red" Height="150" Width="150" HorizontalAlignment="Left" Margin="0,0,0,0" Name="ellipse1" Stroke="Black" VerticalAlignment="Top"  >
            <Ellipse.OpacityMask>
                <RadialGradientBrush>
                    <GradientStop Color="#FFB94444" Offset="0.496"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.491"/>
                </RadialGradientBrush>
            </Ellipse.OpacityMask>
        </Ellipse>
        <Ellipse Fill="White" Height="100" Width="100" Margin="25,25,25,0" Name="ellipse2" Stroke="Black" VerticalAlignment="Top" />       
    </Grid>
</UserControl>

解决方案

It looks like you already found your answer (a few years ago), but for anyone else looking to do this, you may want to check out CompositeGeometry:

http://msdn.microsoft.com/en-us/library/ms751808.aspx#combindgeometriessection

Such as:

<Path Fill="Red" Stroke="Black">
    <Path.Data>
        <CombinedGeometry GeometryCombineMode="Xor">
            <CombinedGeometry.Geometry1>
                <EllipseGeometry RadiusX="75" RadiusY="75" Center="75,75" />
            </CombinedGeometry.Geometry1>
            <CombinedGeometry.Geometry2>
                <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />
            </CombinedGeometry.Geometry2>
        </CombinedGeometry>
    </Path.Data>
</Path>

Then IsHitTestVisible="False" should prevent mouse interference, when needed.

这篇关于如何在 WPF 中创建一个带孔的圆?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！