RaphaelJS HTML5库pathIntersection（）错误或替代优化（截图）

Question

我有一张使用RaphaelJS库生成的图表。这只是漫长的道路：

  

M 50 122 L 63.230769230769226 130 L 76.46153846153845 130 L   89.6923076923077 128 L 102.92307692307692 56 L 116.15384615384615 106 L 129.3846153846154 88 L 142.6153846153846 114 L 155.84615384615384 52   L 169.07692307692307 30 L 182.3076923076923 62 L 195.53846153846152   130 L 208.76923076923077 74 L 222 130 L 235.23076923076923 66 L   248.46153846153845 102 L 261.6923076923077 32 L 274.9230769230769 130 L 288.15384615384613 130 L 301.38461538461536 32 L 314.6153846153846   86 L 327.8461538461538 130 L 341.07692307692304 70 L   354.30769230769226 130 L 367.53846153846155 102 L 380.7692307692308 120 L 394 112 L 407.2307692307692 68 L 420.46153846153845 48 L   433.6923076923077 92 L 446.9230769230769 128 L 460.15384615384613 110 L 473.38461538461536 78 L 486.6153846153846 130 L 499.8461538461538 56   L 513.0769230769231 116 L 526.3076923076923 80 L 539.5384615384614 58   L 552.7692307692307 40 L 566 130 L 579.2307692307692 94 L.   592.4615384615385 64大号605.6923076923076 122大号618.9230769230769 98大号632.1538461538461 120升645.384615384615470μL的658.6153846153845 82大号671.8461538461538 76大号685.0769230769231 124大号698.3076923076923为110l 711.5384615384615：94L 724.7692307692307 130L的738 130L的751.2307692307692 66大号764.4615384615385 118大号777.692307692307670μL的790.9230769230769 130L的804.1538461538461 44 L 817.3846153846154 130 L 830.6153846153845 36 L 843.8461538461538 92 L 857.076923076923 130 L 870.3076923076923 76 L 883.5384615384614 130 L 896.7692307692307 60 L 910 88

同样在这些图表下方，我有一个相同宽度（860px）的jqueryUI滑块，并以图表为中心。我想移动滑块以在滑块位置相应地移动图表上的点。见附件截图：

正如你所看到的，似乎工作正常。我使用pathIntersection()方法实现了这种行为。在每个ui.value（x坐标）的滑动事件中，我与我的chartPath（上面的那个）相交，在x坐标处有一条垂直直线。

但仍有一些问题。其中一个是它运行得非常困难，它有时会冻结......而且非常奇怪有时它似乎根本不相交甚至它应该......我将在下面的两个案例中确定：

M 499.8461538461538 0 L 499.8461538461538 140

M 910 0 L 910 140

你能否解释为什么会发生这种交叉行为（它应该返回一个点）..而最糟糕的部分似乎是它随机发生..如果我使用另一个图表数据。

此外，如果您可以确定另一个（更好的）解决方案，以使滑块位置与图表上的点同步..将是完美的。

我考虑过使用Element.getPointAtLength(length)，但我不知道如何使用{{1}}。我想我应该保存pathSegments并为每个来计算起始长度和结束长度。

Answer 1

我认为最好使用源数据手动查找交叉点。不应该太难，因为这些点已经按x排序。

当您检查其中一个顶点处的交叉点时，路径交叉点似乎失败，这可以被认为是一个错误，但实际上并不令人惊讶，因为该库从未用于计算几何。

通过快速入侵，当pathIntersection无法生成单个值并再次检查时，您还可以尝试稍微修改x值。尝试499.8461538461538 + 0.0001 * (2 * Math.random() - 1)而不仅仅是499.8461538461538。在获得正确答案之前，您可能需要尝试几次，但这不太可能。我相信这种技术通常被称为扰动。