在Raphael.js中获取两点之间的子路径,而不是位置

时间:2013-05-15 12:16:59

标签: svg raphael bezier

我在Raphael.js中有一条路径,这是一条贝塞尔曲线。两条线与此路径相交。我可以用Raphael.pathIntersection()获得交叉点。我想获得这两个点之间的子路径的路径字符串。 Raphael.getSubPath()需要知道路径上的位置,但我不知道这些位置,只知道绝对点。我怎样才能获得这些交叉点的​​位置,以便找到子路径?

由于

编辑:下面是为构成我想要查找的子路径的开始和结束的两个交叉点中的第一个返回的交叉点对象。我可以从中看到交叉点发生在哪个段,但是如何从该信息开始沿路径获取实际位置?

0: Object
  bez1: Array[8]
    0: 746.6695658365885
    1: 444.9913024902344
    2: 746.6695658365885
    3: 444.9913024902344
    4: 767.3333333333334
    5: 383
    6: 767.3333333333334
    7: 383
  bez2: Array[8]
    0: 743
    1: 427
    2: 750
    3: 428.5
    4: 752.5
    5: 428.8333333333333
    6: 761
    7: 432
  segment1: 1
  segment2: 9
  t1: 0.330626006717131
  t2: 0.5304347826090153
  x: 751.9768115942079
  y: 429.0695652173915

2 个答案:

答案 0 :(得分:2)

实际上,pathIntersection也会将相交路径上的位置返回为t1&返回对象中的t2,不仅是绝对位置。

答案 1 :(得分:1)

很抱歉,我想我无法理解英语,所以在以下情况中:

       _|_________
       \|
        |\
        | \
        |  \
 _______|___\
        |

(不能在这里发布数据,希望你理解) 使用Raphael.pathIntersection(),它将返回类似于此的内容:

0: Object
    bez1: Array[8]
    bez2: Array[8]
    segment1: 1
    segment2: 1
    t1: 0.49131376884437716
    t2: 4.686749827219845e-13
    x: 221.6492901831065
    y: 425.40404348103067
    __proto__: Object
1: Object
    bez1: Array[8]
    bez2: Array[8]
    segment1: 2
    segment2: 1
    t1: 0.9999999999901484
    t2: 1
    x: 281.50000000000495
    y: 325.3666666666513
    __proto__: Object
2: Object
    bez1: Array[8]
    bez2: Array[8]
    segment1: 3
    segment2: 1
    t1: 5.420619967753905e-13
    t2: 0.9999999999989502
    x: 281.49999999999204
    y: 325.3666666666728
    __proto__: Object
    length: 3
__proto__: Array[0]

每个交叉段的子路径都可以通过 使用Raphael.getTotalLength和Raphael.getSubpath

逐个显示这些段上的子路径
        |
        |
        |
        | 
        |  
        |___
        |

        |
       \|
        |\
        | \
        |  \
        |   \
        |

       _|
        |
        |
        | 
        |  
        |   
        |

他们将这些子路径加入到一个以获得最终路径?

       _|
       \|
        |\
        | \
        |  \
        |___\
        |