0

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

原始问题

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

为什么？

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

什么？

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

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

我希望我能对 SVG 变形背后的逻辑有所了解。IE 如何将顶点匹配在一起并进行补间，如何将顶点从尖角无缝转换为贝塞尔曲线，这些转换背后的数学原理是什么，如何变形不同顶点数的 SVG（如果你碰巧有什么想法），您将如何防止顶点与目标形状中的多个对应点匹配等？

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

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

免责声明

(1) 我非常精通 Javascript、它的语法和复杂性。我只是从未在 Javascript 中处理过向量，我不确定如何定位和操纵顶点。

(2) 我不是要求提供关于如何完成此任务的完整、深入的教程，我知道这不是我们任何人的目的。相反，我会欣赏一个骨干，朝着正确的方向前进，以及对这个过程的细微差别的一些洞察力。

TL;博士

您可以对从一个 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 变形的解决方案，它们很丰富，我希望了解这个过程，以便我可以重新创建它，以扩展我的开发知识。

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

4

1 回答 1

2

我创建了一个简单的库来合并 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

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

于 2016-04-04T08:39:24.420 回答