C# WPF 在多边形内插入椭圆填充答案

【问题标题】：C# WPF Insert an elliptical fill inside a polygonC# WPF 在多边形内插入椭圆填充
【发布时间】：2016-03-06 15:19:26
【问题描述】：

我在代码中从外部数据生成一个多边形形状，并使用PointCollection 绘制到Canvas。最重要的是，从用户选择的多边形点开始，我覆盖了用户可选择大小的circle (Ellipse)。

接下来我需要做的是让圆的边界受多边形周长的约束。这样用户就可以改变圆的大小来部分填充多边形或完全填充它，如果做得足够大的话。多边形边界外的圆的任何部分都被剪掉了。

谁能帮我解决这个问题？谢谢。

【问题讨论】：

标签： c# .net wpf drawing polygon

【解决方案1】：

您需要使用椭圆的Clip 属性。您可以使用多边形的RenderedGeometry 属性作为剪辑几何的来源。但是，考虑到您将它们放置在画布内，您需要考虑它们的位置。

让我们创建一个多值转换器，将一个形状与另一个形状进行剪辑：

public class ClipWithConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        var clipped = (Shape)values[0];
        var clip = (Shape)values[1];

        var clippedPos = new Point(Canvas.GetLeft(clipped), Canvas.GetTop(clipped));
        var clipPos = new Point(Canvas.GetLeft(clip), Canvas.GetTop(clip));
        var deltaVector = clipPos - clippedPos;

        var geometry = clip.RenderedGeometry.Clone();
        geometry.Transform = new TranslateTransform(deltaVector.X, deltaVector.Y);
        return geometry;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

现在我们可以在 XAML 中使用它了：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1">
    <Window.Resources>
        <local:ClipWithConverter x:Key="ClipWithConverter"/>
    </Window.Resources>
    <Canvas>
        <Ellipse x:Name="Ellipse" Canvas.Left="50" Canvas.Top="0"
                Fill="Red" Width="250" Height="250">
            <Ellipse.Clip>
                <MultiBinding Converter="{StaticResource ClipWithConverter}">
                    <Binding ElementName="Ellipse"/>
                    <Binding ElementName="Polygon"/>
                </MultiBinding>
            </Ellipse.Clip>
        </Ellipse>
        <Polygon x:Name="Polygon" Canvas.Left="10" Canvas.Top="10"
                Stroke="Black" StrokeThickness="3"
                Points="100 0, 300 150, 150 300, 0 100"/>
    </Canvas>
</Window>

但是，我们的转换器调用有点太早了，当时还没有渲染几何体，所以让我们在构造函数中添加一些小技巧：

    public MainWindow()
    {
        InitializeComponent();
        Dispatcher.InvokeAsync(
            BindingOperations.GetMultiBindingExpression(Ellipse, ClipProperty).UpdateTarget,
            DispatcherPriority.Background);
    }

结果如下：

我将适当地更新绑定作为练习。

【讨论】：