javascript - SVG Morph Javascript逻辑

Question

编辑：已对问题进行了缩小范围的编辑，但我认为保留原始信息会有所帮助。查看结论部分以进行编辑。

原始问题

今天是个好日子！我想学习SVG变形背后的逻辑。作为快速的先驱，我知道在Stack Overflow上已经有与此类似的问题，但据我所知这不是重复的。如果您再读一点，您会明白我的意思。

为什么？

我想将一个SVG转换为另一个，但是我需要一个跨浏览器的解决方案。我已经找到了诸如GreenSock之类的解决方案，但是我买不起他们的许可证。

什么？

本着不断发展的开发人员的精神，我决定扩大视野，并找到如何制作个人的，可重复使用的跨浏览器SVG变体解决方案。不过，在开始之前，我想大致了解我的目标。

详细信息（我的主要问题）

我希望我可以对SVG变形背后的逻辑有所了解。即顶点如何相互匹配和补间，顶点如何从尖锐的角无缝转换为贝塞尔曲线，这些转换背后的数学原理是什么，如何变形不同顶点数的SVG（如果碰巧有任何想法），如何防止顶点与目标形状中的多个对应对象匹配等？

我对逻辑，计算机科学和数学更感兴趣。如果您愿意根据我需要使用的内置Javascript函数为我指明正确的方向，那么我将不胜感激，但这不是必须的。一旦确定了需要采取的逻辑方向，便可以轻松查找该文档。

例如，为了使事情在响应中保持一致，如果我想将一个圆形变形为正方形怎么办？ （显然有更简单的方法可以做到这一点，但是使用它只会使可视化变得更简单）

免责声明

（1）我精通Javascript，其语法和复杂性。我从来没有处理过Javascript中的向量，我不确定顶点是如何定位和操纵的。

（2）我不是要获得有关如何完成此操作的完整，深入的教程，我知道这不是我们中的任何一个人的目的。相反，我会很高兴有一个骨干，朝着正确的方向前进，并对这一过程的细微差别有一些见识。

TL; DR

您可以对从一种SVG变形为另一种（简单或复杂）的逻辑，科学或数学提供什么见解。

结论

感谢您提供的任何见解！这绝不是立即需要的，因此请随时抽出时间来回应。

编辑：

这个问题因过于广泛而被搁置。回顾我写的东西之后，我完全明白了。因此，这里是我想要帮助的内容。

可以说我有插画家的向量A：

<svg id="Layer_1" x="0px" y="0px" width="72px" height="72px" viewBox="0 0 72 72" . . . >
    <polygon style="fill:#FFFFFF;" points="72,72 36,72 0,72 0,36 0,0 36,0 72,0 72,36 "/>
</svg>

和向量B：

<svg id="Layer_1" x="0px" y="0px" width="72px" height="72px" viewBox="0 0 72 72" . . .>
    <path style="fill:#FFFFFF;" d="M72,36c0,9.941-4.029,18.941-10.544,25.456S45.941,72,36,72c-9.938,0-18.937-4.027-25.451-10.539
    C4.031,54.945,0,45.943,0,36c0-9.941,4.029-18.941,10.544-25.456C17.059,4.029,26.059,0,36,0c9.94,0,18.939,4.029,25.455,10.543
    C67.971,17.058,72,26.059,72,36z"/>
</svg>

向量A是具有8个等距顶点的完美正方形，向量B是具有8个等距顶点的完美圆形。

如果我想将Vector A转换为Vector B，该如何在Javascript中进行处理？我知道我将必须使用循环并将点主动移动到其指定的目的地，但是，首先，什么是定位和移动单个顶点的最佳方法？其次，确定顶点应移动到哪个位置的最佳方法是什么，以及如何对其进行主动跟踪。对于这样的情况，即顶点之间的间隔是完美的，并且多个点都与单个目标等距，那么我将如何逻辑地匹配正确的顶点以获得最美观的结果？第三，在此示例中，我将多边形元素转换为路径元素，这很重要吗？如果是这样，我将如何解决这个障碍。

同样，我对逻辑最感兴趣，但是始终喜欢特定的代码。只是重申一下，我不是在寻找SVG变形的解决方案，这些方法非常丰富，我希望了解该过程，以便我可以重新创建它，以扩展我的开发知识。

非常感谢你！感谢所有输入。

Answer 1

我创建了一个简单的库来合并JavaScript中的两个图像，但是它不适用于SVG ...但是也许我仍然可以提供一些建议：

一旦有了匹配点，它应该很容易：
-让图片1中的呼叫点O1 .. Ox（以O为起点；）
-让图片2中的呼叫点D1 ... Dx（以D为目的地）
-让我们调用开始变形T1的时间
-让我们叫停T2的时间（所以T2-T1是动画的长度）

根据T2和T1，您可以计算需要显示的帧数。
然后您可以计算每帧的位置。基本上，T1处的帧应为图片1 ... T2处的帧应为图片2 ...让呼叫帧数NF。

对于在帧之间的间隔，您需要计算点的新位置，我们称它们为F1_1 ... F1_x（从1到x的一个点）。让我们调用特定帧Fx（因此特定帧中的点为Fx_x）

然后，我们可以计算每个帧的点的位置：

F1_x = Fx *（从Tx到Px的距离）/ NF

解释..我们从第一个图像中获取一个点，然后从第二个图像中获取一个点，计算它们之间的距离，然后将该距离除以我们要显示的帧数。然后对于每一帧，我们将此距离乘以帧号。

所以现在我们有了每个帧的点位置。如果它的SVG可能已经存在。如果是多色，则可能要混合图像1和图像2的颜色。

您可以采用与计算点位置相同的方式执行此操作。找到差异，然后继续以小步进行更改，其中步数等于要显示的帧数。

您可以看一下我写的有关图像变形库的博客文章（带有指向github项目的链接）：http://peter.pisljar.si/#!/en/projects/image_morph_js

但是..要找到匹配点，可能需要做更多的工作。