双色Path对象

Question

下图说明了我要实现的目标:

http://i53.tinypic.com/14ugfpd.png

基本上我想创建两个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>

第一条曲线具有手动优化的点位置,第二条曲线具有通过考虑行程厚度而容易计算的点位置.你可以看到第二条曲线并不完美,因为两者之间有一个空间.如何以编程方式创建两条完美的"触摸"曲线,而无需手动优化每条曲线(实际上这是不可能的,因为曲线是在代码中生成的)？

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

更新#1

平行的直线和曲线由查尔斯Petzold的可能是解决这个问题的方法之一.它实际上工作得很好,但它会使曲线变平,这会在深度缩放时产生视觉效果,当然还有性能缺陷.

然而,该算法不会尝试找到与另一个贝塞尔曲线平行的贝塞尔曲线.该算法完全基于折线:输入是一条或多条折线,输出由每条输入折线的多条折线组成.因此,ParallelPath需要"展平"输入几何体 - 这意味着将整个几何体(包括圆弧和贝塞尔曲线)转换为折线近似.

更新#2

所以我的一个朋友(数学博士感受器)已经分析了这个问题并且创建(三阶)Bézier曲线的平行曲线非常复杂并且计算成本很高.对于平行曲线的每个点,计算机必须计算如下内容:

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

也许有一种方法可以优化这个表达式,但它仍然比标准Bézier曲线计算成本更高(因为平行曲线与原始Bézier曲线完全不同).我希望能够为曲线设置动画,因此这个解决方案可能太昂贵了.这给我们留下了几个选择:

1. 使用Charles Petzold的折线近似,可以产生奇迹,但在深度放大时会出现视觉故障.

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

3. 也许有可能创建像双色画笔之类的东西.这样,我们可以只使用一个Path来实现所需的结果(如第一张图所示).我没有在任何地方见过它,所以这可能不是一个选择.

更新#3

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

• 如何抵消三次贝塞尔曲线？ (启发式算法)
• 三次贝塞尔曲线描边的概述
• 贝塞尔路径拓宽(Python算法)
• 偏移Bézier曲线(Java实现自定义折线Bézier曲线近似;实现与Charles Petzold的不同)
• 并行Bézier(为什么从数学的角度来看,并行Bézier曲线是不可能的)
• 立方Bézier路径和偏移曲线纸的快速,精确展平(下载链接1, 下载链接2)

更多信息:

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

也许是最终解决方案？(来源这里)

...我解决了所有关于Bezier曲线理论的知识,并将未平坦的偏移发展为正确的东西,并且(怪物)记录了Bezier曲线上的A底漆

---

尝试#1

使第二条路径更宽,并在使用Z-Index时将其滑动到第一条路径下方. http://i51.tinypic.com/2r5vwjk.png

这不起作用,Geometry必须相应地进行转换.

Answer 1

而不是使用一个四度贝塞尔曲线,为什么不只使用两个二次曲线的复合？你熟悉贝齐尔曲线数学吗？它们在图形方面受到青睐,因为它们在计算上非常便宜.我最近创建了一个程序,在那里我动画细胞运动(只是为了好玩):

该程序可以在高清显示器上轻松运行,100个blob动画和移动.而这一切都是GDI +.

至于并行贝塞尔曲线,根据维基百科,它无法真正完成:http://en.wikipedia.org/wiki/B%C3%A9zier_curve

因此,您可能必须对启发式方法感到满意.

编辑1:

为避免曲线完全随机,为什么不创建每条曲线的轮廓然后填充路径？一条路径的"底部"曲线将是另一条路径的"顶部"曲线.

编辑2:

好的,按照要求,这就是我如何设想可以计算出类似"铁路轨道"的解决方案:

Answer 2

是否可以使第二条路径（生成的）更宽一点，并使用 z 索引将其滑动到第一条路径的下方（后面）？这样您就可以实现无缝连接。