SVG Morph Javascript Logic

SVG Morph Javascript Logic

本文关键字：Logic Javascript Morph SVG      更新时间：2023-09-26

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

原始问题

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

为什么？

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

什么？

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

细节（我的主要问题）

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

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

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

免责 声明

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

（2）我不是在要求一个关于如何实现这一目标的完整、深入的教程，我知道这不是我们任何人在这里的目的。相反，我很欣赏一个骨干，朝着正确的方向推动，以及对这个过程的细微差别的一些见解。

博士

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

谢谢！感谢所有输入。

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

一旦你有了匹配点，它应该很容易：- 让我们调用图片 1 O1 中的点。牛（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

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

相关文章：