Javascript 旋转SVG路径点以实现更好的变形

我正在使用Snap.SVG中的两个函数，主要是

path2curve

及其周围的函数来构建SVG变形插件

我已经设置了一个演示来更好地说明这个问题。基本上，将形状从简单变形为复杂，而另一种方法是在Javascript功能中正常工作，但是，视觉效果不是很好

第一个形状变形看起来很糟糕，第二个看起来更好一些，因为我稍微改变了/旋转了它的点，但最后一个示例非常完美

因此，我需要一个更好的

path2curve

或一个函数来准备路径字符串，然后另一个函数构建曲线数组。Snap.SVG有一个名为

getClosest

的函数，我认为它可能很有用，但没有文档记录

---

没有关于这个主题的任何文档，因此我非常感谢RaphaelJS/SnapSVG/d3.js/three/js开发人员的任何建议/输入。

我在下面提供了一个可运行的代码片段，它使用Snap.svg，并且我相信它演示了解决您问题的一种方法。就试图找到将起始形状变形为结束形状的最佳方法而言，该算法基本上是将起始形状的点一次旋转一个位置，将（旋转的）起始形状和（不变的）结束形状上的对应点之间的距离平方和，找到所有这些总和的最小值。i、 这基本上是一种最小二乘法。最小值标识旋转，作为第一个猜测，该旋转将提供“最短”的变形轨迹。然而，尽管有这些坐标重新分配，所有“旋转”都应根据需要产生视觉上相同的起始形状

当然，这是一种“盲目”的数学方法，但它可能有助于在进行手动视觉分析之前为您提供一个起点。作为奖励，即使您不喜欢算法选择的旋转，它也为所有其他旋转提供路径“d”属性字符串，因此一些工作已经为您完成

可以修改代码段以提供所需的任何起始形状和结束形状。限制如下：

• 每个形状应具有相同数量的点（尽管点类型，例如“直线到”、“三次贝塞尔曲线”、“水平直线到”等，可以完全不同）
• 每个形状都应闭合，即以“Z”结尾
• 所需的变形应仅涉及翻译。如果需要缩放或旋转，则应在仅基于平移计算变形后应用这些缩放或旋转

顺便说一下，对于您的一些评论，虽然我觉得Snap.svg很有趣，但我也发现它的文档有点缺乏

更新：下面的代码片段适用于Firefox（Mac或Windows）和Safari。但是，Chrome在从外部网站访问Snap.svg库（如所述）时似乎遇到了问题（）。Opera和Internet Explorer也有问题。因此，请在工作浏览器中尝试该代码段，或者尝试将代码段代码以及快照库代码复制到您自己的计算机上。（这是从代码段中访问第三方库的问题吗？为什么浏览器存在差异？请提供有见地的评论。）

var
s=捕捉（），
颜色=[“红色”、“蓝色”、“绿色”、“橙色”]，//颜色列表可以是任意长度
staPath=s.path（“M25,35 l-15，-25 C35,20 25,0 40,0 L80,40Z”），//创建“开始”形状
endPath=s.path（“M10110 h30 l30,20 C30120 35135 25135Z”），//创建“end”形状
statsegs=getSegs（statpath），//仅使用立方贝塞尔将路径转换为绝对值
endSegs=getSegs（endPath），//段，提取pt坐标和段字符串（&T）
numSegs=statsegs.length，//注意：pts的#比路径段的#小一个
numPts=numSegs-1，//b/c路径的初始“moveto”pt也是“close”pt
线路径=[]，
minSumLensSqrd=无穷大，
罗特努莫明，
rotNum=0；
document.querySelector（'button'）。addEventListener（'click'，function（）{
if（rotNum