代码之家  ›  专栏  ›  技术社区  ›  Dimpal Singh

如何根据可拖动辅助对象准确更改svg路径的控制点

  •  2
  • Dimpal Singh  · 技术社区  · 7 年前

    我有一个html5 svg路径标记,如下图1所示。

    Image 1

    Image 2

    现在,我想借助可拖动的辅助对象(在上图中显示为小圆圈)重塑SVG路径。我可以用“开始”和“结束”助手正确地完成它。但我不能用中间的助手。每当我尝试在中间辅助对象的帮助下进行时,中间辅助对象就会开始远离曲线,如图2所示。我希望避免这种情况,并保持曲线始终通过中间辅助对象,如图1所示。以下是上图中出现的曲线的svg路径标记的d属性:

    M 237 359 q 536 -54 208 -267
    

    我只想使用 q 使用命令 M 与上面的模式相同,因为svg路径元素的开始标记和结束标记仅在 Q q 命令。所以我不想失去这种行为。我唯一想知道的是计算 d 属性,以便每当拖动中间辅助对象时,曲线始终仅通过中间辅助对象,如图1所示,并且起点/终点保持在相同的位置。我使用Jquery UI Dragable来拖动助手。

    1 回复  |  直到 7 年前
        1
  •  2
  •   fang    7 年前

    svg路径中的Q/Q命令描述了一条二次贝塞尔曲线,其中第二个控制点(即Q命令的前两个坐标值)将始终不在曲线上。因此,必须计算一条二次Bezier曲线,对3个点进行插值,如下所示:

    1) 假设你的三个点是A、B和C,其中A是起点,B是中点,C是终点。

    2) 计算t=| AB |/(| AB |+| BC |),其中| AB |是点A和点B之间的距离,| BC |是点B和点C之间的距离。

    3) 计算二次贝塞尔曲线的中间控制点为

    P1=(B-A(1-t)^2-C*t^2)/(2*t*(1-t))

    然后,可以使用svg path命令绘制此二次贝塞尔曲线,如下所示

    d=“最大Ay Q P1x P1y Cx Cy”

    其中,Ax、At、P1x、P1y、Cx、Cy是点A、P1和C的x、y分量。此处使用Q命令(而不是Q),以便我们可以直接使用点坐标。