问题标签 [morphing]

我想实现图像变形，为此我需要能够使用给定的一组点及其目标位置（它们将被“拖动”的位置）对图像进行变形。我正在寻找一个简单易用的解决方案来完成工作，它不必看起来很棒或非常快。

这是我需要的一个例子：

假设我有一个图像和一组只有一个变形点 [0.5,0.5]，其目的地为 [0.6,0.5]（或者我们可以说它的运动矢量是 [0.1,0.0]）。这意味着我想将图像的中心像素向右移动 0.1。某些给定半径 r 中的相邻像素当然需要与该像素一起“拖动”一点。

我的想法是这样做：

1. 我将根据提供的变形点集制作一个将源图像位置映射到目标位置的函数。
2. 然后我必须找到这个函数的反函数，因为我必须通过目标像素并查看“点必须来自哪里才能到达这个位置”来执行转换。

第 1 步中的函数如下所示：

在哪里

• p0 ([x,y] vector) 是变形点位置。
• p1 ([x,y] 向量) 是源图像中的任何给定点。
• p2 ([x,y] vector) 是 p1 将被移动到的位置。
• s ([x,y] 向量) 是变形点的运动向量，表示 p0 将被拖动到哪个方向和多远。
• r（标量）是半径，只是一些数字。

我对第 2 步有疑问。反函数的计算对我来说似乎有点太复杂了，所以我想知道：

• 如果有一个简单的解决方案可以找到反函数，或者
• 如果有一个更好的函数可以简单地找到反函数，或者
• 如果有一种完全不同的方式来做这一切很简单？

我试图将一个薄的矩形立方体变形为由和盘绕。我已经搜索了已经提出的问题，但没有一个能指导我。three.jstween.js

我应该使用哪个变形功能，如何创建线圈形状？

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

原始问题

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

为什么？

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

什么？

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

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

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

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

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

免责声明

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

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

TL;博士

您可以对从一个 SVG 变形到另一个（简单或复杂）背后的逻辑、科学或数学提供什么见解。

结论

感谢大家提供的任何见解！这绝不是立即需要的，因此请随时回复。

编辑：

这个问题因为太宽泛而被搁置。重温我写的东西后，我完全明白了。因此，更具体地说，这是我想要帮助的内容。

假设我有来自插画家的矢量 A：

和向量 B：

向量 A 是一个具有 8 个均匀分布的顶点的完美正方形，向量 B 是一个具有 8 个均匀分布的顶点的完美圆形。

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

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

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

我阅读了很多关于 Android 上的动画、场景和转场的信息，但我发现没有提到的一件事就是我所说的连续转场。例如，让用户从左向右移动滑块会导致从一个视图“变形”到另一个视图，因此如果共享元素不在新布局中，它们将移动到新位置或淡出。使用 Scenes 和 TransitionManager 可以让我在单击按钮时做类似的事情，但不能与正在进行的 Transition 进行交互，因此用户可以控制动画的速度和方向。这在Android中可能吗？我可以为此使用内置技术还是必须手动计算和映射所有翻译？

我一直在尝试找到一种简单而自由的方法来在贝塞尔形状与其镜像副本之间进行变形。因为他们的分数相同，我认为这将是一件容易的事。不是。我尝试了 KUTE 和 SVG morpheus。Kute 执行了一个不必要的垂直翻转，而 Morpheus 执行了一个不必要的水平翻转（此处为 codepen）。唯一能做到这一点的 JavaScript 库是付费的 MorphSVG 插件。（codepen here）很遗憾，我希望将来能找到更便宜的解决方案。如果有人知道什么，请告诉我。

这是我制作的codepen。

如您所见，路径没有变形。我已经得出结论，问题出在svg本身，它们没有变形。可能是什么问题？这些形状非常简单，都具有相同的大小和锚点，并且正如kute.js 文档中所说，“闭合形状（它​​们的 d 属性以 z 结尾）。”

有人知道bitmoji或其他类似服务如何工作吗？我有一个应用程序的想法，它应该有自定义头像。

有多个基于 Morphing 的 3D 游戏库。简单的。然而，所有的 2D 角色都是用精灵缝合而成的。但是如果你考虑一下bitmoji有多少选项，你认为他们基本上已经绘制了所有可能的精灵吗？还是我傻到找“黄砖路”？

感谢您的任何建议。

为了在顶点着色器中插入顶点位置以在两个变形目标之间进行变形动画，我将两个顶点位置发送到着色器。现在我有一个大约有 600 个变形目标的网格，我觉得尝试发送到顶点着色器 600 个顶点位置不是一个好主意。有人可以告诉我用这么多变形目标为对象设置动画的正确方法是什么？

PS 我对 3d 编程很陌生。

我的方法包括以下步骤：

1）为管创建初始路径（点位置数组）

2）基于路径渲染管

3) 改变路径数组

4) 转到第 2 步

所以，也许我需要这样的功能：

假设我想渲染一条爬行的蛇。

我发现对我来说很漂亮而且很复杂，请给我基本的了解如何解决我的问题。

示例 - http://codepen.io/tdhooper/full/ZGPOQJ/

我使用这个函数来创建管：

请建议我使用哪个函数来创建曲线以及如何变形（不缩放、不旋转、不平移管）？

我的点数很简单：

我正在尝试解决与图像处理相关的问题，但似乎我一直坚持选择合适的算法。也许你们中的某个人可以帮助我并说出我对问题的推理中的问题所在。

假设我们有两个 16x16 像素的图像。作为用户，我在这张图片上选择了两个点。作为用户，我知道点 x1(8,8) 和 y1(10,10) 与第二张图像中的点相同，比如说 x2(5,5) 和 y2(8,8)。

所以这两个点对我来说是某种向量。所以假设我可以计算这个向量的长度。

我想达到什么目的？我想移动第一张图像上的点，与第二张图像上的点相关。

我的“新”点 X 应该在点 x1 和 x2 之间（在中间），而我的“新”Y 点应该在点 y1 和 y2 之间。

当然，很容易将 (x1,y1) 像素的值移动到 (px1,px2) 像素，但是我该怎么处理剩下的呢？我的意思是我需要对所有图像进行变形/变形或其他任何操作。

我卡住了。我正在研究变形算法、变形算法、最近邻算法，但它们对我来说没用，或者我不明白如何正确使用它们。

我相信你不会否定我的问题。我真的需要线索才能继续前进。我不需要在代码中实现，我只需要了解我对问题缺乏了解的地方以及我如何以不同的方式思考它。提前致谢

[编辑]

我试图从这里理解图像变形算法。你能帮我理解到底是什么吗

如果我理解正确，||QP|| 应该是点 Q 和 P 之间的长度。那么 (XP) 或 (QP) 是什么？我如何计算垂直（QP）？它应该是线方程，还是长度？