下图说明了我正在努力实现的目标:

基本上我想创建两个 Path相互“接触”的对象(平行路径)。这是用于生成此图像的 XAML:

<StackPanel Orientation="Horizontal">
    <StackPanel.LayoutTransform>
        <ScaleTransform CenterX="0" CenterY="0" ScaleX="15" ScaleY="15" />
    </StackPanel.LayoutTransform>
    
    <Grid Margin="-5,0,0,0">
        <Path Stroke="Blue">
            <Path.Data>
                <PathGeometry>M10,10 C20,10 10,20 20,20</PathGeometry>
            </Path.Data>
        </Path>
        <Path Stroke="Red">
            <Path.Data>
                <PathGeometry>M10,11 C19,10.85 9,20.80 20,21</PathGeometry>
            </Path.Data>
        </Path>
    </Grid>
    
    <Grid Margin="-5,0,0,0">
        <Path Stroke="Blue">
            <Path.Data>
                <PathGeometry>M10,10 C20,10 10,20 20,20</PathGeometry>
            </Path.Data>
        </Path>
        <Path Stroke="Red">
            <Path.Data>
                <PathGeometry>M10,11 C19,11 9,21 20,21</PathGeometry>
            </Path.Data>
        </Path>
    </Grid>
</StackPanel>

第一条曲线具有手动优化的点位置，第二条曲线具有通过考虑笔划粗细轻松计算的点位置。你可以看到第二条曲线并不完美，因为两者之间有一个空间。如何以编程方式创建两条完美“接触”的曲线，而无需手动优化每条曲线(这实际上是不可能的，因为曲线是在代码中生成的)？

简单地说，我在代码中生成一条曲线(resp. Path)，我需要它有两种颜色。所以我认为制作第二个平行 Path 可以解决问题，但调整第二个 Path 的 Geometry(使其平行)已被证明是有问题。

更新 #1

Parallel Lines and Curves Charles Petzold 可能是解决此问题的一种方法。它实际上工作得很好，但它使曲线变平，这在深度缩放时会产生视觉伪影，当然还有性能缺陷。

The algorithm does not, however, attempt to find a Bézier curve that is parallel to another Bézier curve. The algorithm is instead based entirely on polylines: The input is one or more polylines and the output consists of multiple polylines for each input polyline. For this reason, ParallelPath needs to "flatten" the input geometry—which means converting the entire geometry (including arcs and Bézier curves) into a polyline approximation.

更新 #2

所以我的一个 friend (数学博士 inceptor)分析了这个问题并创建了平行曲线到(三阶)Bézier curve非常复杂且计算量大。对于平行曲线的每个点，计算机必须计算如下内容:

(degree 3 polynomial) + (degree 2 polynomial) / sqrt(degree 4 polynomial)

也许有一种方法可以优化这个表达式，但它仍然比标准贝塞尔曲线的计算成本高得多(因为平行曲线是与原始贝塞尔曲线完全不同的曲线)。我希望能够为曲线设置动画，因此此解决方案可能会占用太多 CPU 资源。这给我们留下了几个选择:

1. 使用 Charles Petzold 的折线近似法，效果很好，但在深度缩放时会出现视觉故障。

2. 根据 Charles Petzond 的近似值推导出我们自己的近似值。使用贝塞尔曲线而不是直线(也许弧线就足够了)。这将解决深度缩放问题，但它可能很难编码(我不知道如何做到这一点)。

3. 也许可以创建类似双色画笔的东西。这样，我们可以只使用一个 Path 来达到预期的结果(如第一张图片所示)。不过我在任何地方都没有看到它，所以这可能不是一个选择。

更新 #3

我发现了一些非常有趣的链接:

• How to offset a cubic bezier curve? ( Heuristic algorithm )
• Outline of cubic bezier curve stroke
• bezier path widening ( Python algorithm )
• Offset Bézier Curves (自定义折线贝塞尔曲线近似的 Java 实现；实现不同于 Charles Petzold 的实现)
• Parallel Bézier (为什么从数学角度看平行贝塞尔曲线是不可能的)
• 三次贝塞尔路径和偏移曲线纸的快速、精确展平(Download link 1、Download link 2)

更多信息:

• Qt 框架的 QPainterPathStroker 应该使用 Thomas F. Hain 的平行曲线算法
• 这Java Stroker还应该能够绘制平行曲线

也许是最终的解决方案？ (来源 here)

... I worked out all I knew about Bezier curve theory, and developed the unflattened offsetting to something that is correct, and (monster) documented that on A primer on Bezier curves

尝试 #1

Make second path a bit wider, and slide it underneath the first path while using Z-Index. http://i51.tinypic.com/2r5vwjk.png

这行不通，Geometry 必须进行相应的转换。

最佳答案

与其使用一个四次贝塞尔曲线，不如使用两个二次贝塞尔曲线的复合曲线？你熟悉贝塞尔曲线数学吗？它们在图形学中受到青睐，因为它们的计算成本非常低。我最近创建了一个程序，我在其中制作了动画单元格运动(只是为了好玩):

该程序可以轻松地在高清显示器上以全屏方式运行，其中有 100 个动画和移动的 Blob 。而且都是 GDI+。

至于平行贝塞尔曲线，根据维基百科，它实际上是做不到的:http://en.wikipedia.org/wiki/B%C3%A9zier_curve

因此您可能不得不对启发式方法感到满意。

编辑 1:

为了避免你的曲线完全随机，为什么不创建每条曲线的轮廓然后填充路径呢？一条路径的“底部”曲线将是另一条路径的“顶部”曲线。

编辑 2:

好的，按照要求，这是我设想的可以计算“类似铁轨”的解决方案的方式:

关于c# - 双色路径对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5588077/