Question

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

请参阅此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。如果有人已经知道任何算法来生成这种曲线，请帮忙。

Answer 1

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

没有完全保证曲线不会交叉，但这应该是罕见的。

在端点之间绘制不重叠的曲线

1 个答案: