具有弯曲斜边的多边形三角形答案

【问题标题】：Polygon Triangle with Curved Hypotenuse具有弯曲斜边的多边形三角形
【发布时间】：2015-06-02 11:47:18
【问题描述】：

我可以使用以下 XAML 创建一个多边形：

<Polygon Grid.Row="1"
         Grid.Column="1"
         Fill="{StaticResource GreenBrush}"
         Points="0,1 1,1 1,0"
         Stretch="Fill" />

这会产生一个带有直斜边的直角三角形。但是我想要一个弯曲的斜边。这可以使用多边形吗？如果不是，我该如何实现目标？

上面的 XAML 给出了左侧三角形，但我想要一些类似于右侧三角形的东西。

我觉得这可能很简单，但我似乎无法弄清楚

WPF
C#
Visual Studio 2012

【问题讨论】：

多边形不是您的解决方案，因为它希望在固定点之间进行插值，并且您需要看起来像贝塞尔曲线的东西，因此您需要考虑将路径几何与某些东西一起使用就像曲线的 QuadraticBezierSegment，有点像 @BogdanBanciu 在他从文档中获取的示例中展示的那样。

标签： c# wpf xaml polygon

【解决方案1】：

问题是因为多边形只允许直线实现曲线效果会很困难
你有两个选择
1)使用混合创建路径
例如

<Path Data="M0.037120935,318.97711 L3.0000002,319 0,319 z M517,5.0000003 L517,319 3.0000002,319 C286.87436,319 517,178.4174 517,5.0000003 z M517,0 L517,5.0000003 516.89777,0.063097671 z" Fill="#FFFB0404" Stretch="Fill"/>

2) 首先创建三角形，然后将其斜边与椭圆重叠。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Class="WpfApplication1.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid x:Name="grid">
        <Polygon         
         Points="0,1 1,1 1,0"
         Stretch="Fill" Fill="#FF69FB04" />
        <Ellipse Fill="White" HorizontalAlignment="Left" Height="628" Margin="-511,-309,0,0" VerticalAlignment="Top" Width="1028"/>
        </Grid>

</Window>

【讨论】：

这是一个很好的答案，而且非常清楚。另一个答案也很好，但这个答案的清晰度给了优势
@StevenWood 很高兴能够提供帮助:)

【解决方案2】：

也许这会对你有所帮助:)

here

更新：

好的，这段代码：

<Canvas HorizontalAlignment="Left" Height="326" Margin="167,56,0,0" VerticalAlignment="Top" Width="311" MouseEnter="Canvas_MouseEnter" Background="#FFC7C5C5">
        <Path Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigureCollection>
                            <PathFigure StartPoint="10,100">
                                <PathFigure.Segments>
                                    <PathSegmentCollection>
                                        <QuadraticBezierSegment Point1="200,150" Point2="300,100" />                                            
                                    </PathSegmentCollection>
                                </PathFigure.Segments>
                            </PathFigure>
                            <PathFigure StartPoint="10,100">
                                <PathFigure.Segments>
                                    <PathSegmentCollection>
                                        <LineSegment Point="10,300"></LineSegment>
                                    </PathSegmentCollection>
                                </PathFigure.Segments>
                            </PathFigure>
                            <PathFigure StartPoint="10,300">
                                <PathFigure.Segments>
                                    <PathSegmentCollection>
                                        <LineSegment Point="300,100"></LineSegment>
                                    </PathSegmentCollection>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathFigureCollection>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>

将制作这个数字：

【讨论】：