使用两个任意点之间的 ArcSegment 半圆的 WPF 数学答案

【问题标题】：WPF Math for semi circle using ArcSegment between two arbitrary points使用两个任意点之间的 ArcSegment 半圆的 WPF 数学
【发布时间】：2022-03-23 19:45:34
【问题描述】：

有人可以展示在 WPF 中使用 ArcSegment 在两个任意点之间绘制半圆的数学运算吗？

我对 ArcSegment 中的 RadiusX、RadiusY 感到很困惑。它似乎与这两个点无关，而是与 X 和 Y 轴有关。真的应该是这样吗？

【问题讨论】：

标签： wpf geometry

【解决方案1】：

你是对的，ArcSegment 中的Size 不是定义圆弧起点和终点的点之间的半径。该属性描述了在这些点之间绘制的椭圆应该有多大。如果你想要一个圆形而不是一个椭圆，你必须记住始终将 size 的 x 和 y 值设置为相同。如果你想总是画出一半的圆，你还需要确保Size 是这两个点之间距离的一半。

例如看下面的代码：

<Canvas>
    <Path Stroke="Black">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="100,100">
                    <ArcSegment IsLargeArc="True"
                                Size="50, 50"
                                Point="200, 100"
                                SweepDirection="Clockwise" />
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Canvas>

这将绘制圆的上半部分，从点 100, 100 开始，到点 200, 100 结束。由于我已将Size 属性设置为50, 50（这些点之间的距离为 100），因此这将创建正好一半的圆。 SweepDirectionstates，那个圆圈应该是顺时针画的，这就是它画上半部分的原因。在下面的屏幕上查看Clockwise 和Counterclockwise 之间的区别：

IsLargeArc 选择是否绘制椭圆的较大部分或较小部分。由于我画的是半圆，这没有任何意义，但是如果你要画不同大小的椭圆，这会显着改变输出的外观，你可以试试看它是如何工作的。

这是当您尝试使用其较大的弧形部分放置200, 200 大小的弧形、clockwise 时的样子。如您所见 - arc 甚至不适合窗口（这是 WPF 设计师拍摄的，在正常的应用程序中溢出部分会被切断）

这是同样的事情，但设置为显示小弧：

当我将 Size 属性更改为 200, 200 时，绘制的圆只是大了 4 倍，但仍然在您定义的精确点开始和结束。 Size 与点无关，您在这些点之间绘制椭圆/椭圆，但它会改变椭圆的外观。

希望能告诉你ArcSegment中的Size是什么意思，如果还有疑惑，可以问更详细的问题。

【讨论】：

非常感谢帕科。我刚刚又开始着手解决这个问题，我必须说你的答案比 MSDN 文档清晰一百倍。
@NVM 即使 MSDN 文档很好，用于实现圆弧功能的几何模型也有问题，它违反了最小意外原则，并且与周围的所有其他绘图 API 不同......

【解决方案2】：

到目前为止，我已经这样做了，我想要 8 段，但我正在努力解决如何将这些弧切成两半。这是如何实现的？下面是我的代码。

<Canvas>
<Canvas Canvas.Top="200" Canvas.Left="200">
    <Ellipse Width="300" Height="300" Stroke="Black">
        <Ellipse.RenderTransform>
            <TranslateTransform X="-150" Y="-150" />
        </Ellipse.RenderTransform>
    </Ellipse>

    <Canvas>
        <Path Stroke="Red" StrokeThickness="10">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0,-150">
                        <ArcSegment
                            IsLargeArc="False"
                            Size="150, 150"
                            Point="150, 0"
                            SweepDirection="Clockwise" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>

    <Canvas>
        <Path Stroke="Blue" StrokeThickness="10">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="150,0">
                        <ArcSegment
                            IsLargeArc="False"
                            Size="150, 150"
                            Point="-150, 0" 
                            SweepDirection="Clockwise" />
                        <!--Do not change Point -->
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>

    <Canvas>
        <Path Stroke="HotPink" StrokeThickness="10">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0,150">
                        <ArcSegment
                            IsLargeArc="False"
                            Size="150, 150"
                            Point="-150, 0" 
                            SweepDirection="Clockwise" />
                        <!--Do not change Point -->
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>

    <Canvas>
        <Path Stroke="Green" StrokeThickness="10">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="-150,0">
                        <ArcSegment
                            IsLargeArc="False"
                            Size="150, 150"
                            Point="0, -150" 
                            SweepDirection="Clockwise" />
                        <!--Do not change Point -->
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>

    <Canvas>
        <Path Stroke="#1F93D9" StrokeThickness="3">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="-150,0">
                        <ArcSegment
                            IsLargeArc="False"
                            Size="150, 150"
                            Point="0, -150" 
                            SweepDirection="Clockwise" />
                        <!--Point is end point -->
                        <!--Startpoint is start point -->
                        <!--Do not change Point -->
                        <!--Do not change Point -->
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>

</Canvas>

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review