SVG 变形 Javascript 逻辑答案

【问题标题】：SVG Morph Javascript LogicSVG 变形 Javascript 逻辑
【发布时间】：2016-05-06 02:43:09
【问题描述】：

编辑：问题已被编辑以缩小范围，但我觉得保留原始信息很有帮助。查看结论部分进行修改。

原始问题

大家好！我想了解 SVG 变形背后的逻辑。作为一个快速的前兆，我知道 Stack Overflow 上已经有类似的问题，但据我所知，这不是重复的。如果您进一步阅读，您就会明白我的意思。

为什么？

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

什么？

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

详情（我的主要问题）

我希望我能对 SVG 变形背后的逻辑有所了解。 IE。顶点如何匹配和补间，如何将顶点从尖角无缝转换为贝塞尔曲线，这些转换背后的数学原理是什么，如何变形不同顶点数的 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 个等距顶点的完美圆。

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

同样，我对逻辑最感兴趣，但总是赞赏特定代码。重申一下，我不是在寻找 SVG 变形的解决方案，它们很丰富，我希望了解这个过程，以便我可以重新创建它，以扩展我的开发知识。

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

【问题讨论】：

丢弃不相关的文字肯定会提高 Q 的机会。
这里用Javascript解决stackoverflow.com/a/36202790/803358

标签： javascript animation svg logic morphing

【解决方案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

然而....要找到匹配点可能需要更多的工作。

【讨论】：