在端点之间绘制非重叠曲线答案

【问题标题】：Draw non-overlapping curves between end points在端点之间绘制非重叠曲线
【发布时间】：2017-01-03 01:19:47
【问题描述】：

在我的应用程序中，我需要在一些坐标之间绘制一些曲线，例如 this

请参阅此Fiddle 了解我通过静态数据创建的示例。（例如：C）。我正在使用 svg 和 path 来构建它。我在小提琴中的那个只是为了一个端点。同样，我有大约 20 个端点。这个想法是在端点之间绘制一条不重叠的曲线，如附图。 html看起来像

<div class="c1">
    <svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="711px" viewBox="0 0 1000 711">
        <style type="text/css" >
            <![CDATA[
            path {
                stroke: #17479e;
                fill:   none;
                stroke-width: 3;
                opacity:0.7;
            }
            path.ar4 {
                stroke-width: 3;
            }
            path.ar5 {
                stroke-width: 5;
            }
            path.ar6 {
                stroke-width: 6;
            }
            path.ar7 {
                stroke-width: 7;
            }
            path.ar {
                fill: #17479e;
                stroke-width:0;
                opacity:1;
            }
            ]]>
        </style>
      <defs>
        <marker id="ah1" orient="auto" markerWidth="2" markerHeight="4" refX="0.1" refY="2">
          <path class="ar" d="M0,0 V4 L2,2 Z"/>
        </marker>
      </defs>
      <path id="map_1_3" d="M570,315 C469,323 343,364 268,422"  marker-end="url(#ah1)" class="ar5"/>
      <path id="map_1_4" d="M256,379 C259,374 226,396 268,422"  marker-end="url(#ah1)" class="ar7"/>
      <path id="map_1_5" d="M285,454 C269,443 269,438 268,422"  marker-end="url(#ah1)" class="ar4"/>
      <path id="map_1_6" d="M387,514 C351,448 299,421 268,422"  marker-end="url(#ah1)" class="ar4"/>
    </svg>
  </div>

所以，我觉得我在统计上所做的方式是错误的（当然，为所有坐标定义的时间限制）。所以我正在考虑动态地这样做。如果我在数组中给出端点，函数应该绘制曲线。

我正在使用 PHP。如果有人已经知道生成这种曲线的任何算法，请提供帮助。

【问题讨论】：

标签： php html algorithm math svg

【解决方案1】：

作为第一种方法，您可以尝试使用贝塞尔三次。对于控制点，您将需要连接两个中心，两个中间点形成一个固定形状的梯形。根据需要缩放和旋转。

不能完全保证曲线不会交叉，但这应该很少见。

【讨论】：

谢谢。让我试试