将 JavaScript 中的 SVG 扭曲成弧形答案

【问题标题】：Warp an SVG in JavaScript into an arc将 JavaScript 中的 SVG 扭曲成弧形
【发布时间】：2017-05-30 18:05:10
【问题描述】：

我看到了一个可以创建 svg 弧的 d3 辅助函数：making an arc in d3.js

有没有办法在 d3.js 中将现有的 svg 弯曲成弧？如果没有，如何在 JavaScript 中完成？初始图像可能是一个内部有负空间的正方形，形成猫的轮廓。

我附上了一张我想要的图。我最终想要制作更多并创建一个环，然后是较小变换的同心环。

【问题讨论】：

你能画出你想要的吗？
我用 dvg.js 进行了实验，它能够通过添加大量点并将线变成曲线来扭曲 svg。我更新并添加了我要做什么的图像。
有一种方法，但不适用于所有原语。这可以在 <path> 上完成，其所有实体都分开椭圆弧。因此，如果您将整个 SVG 转换为仅包含线条和贝塞尔曲线的 <path>，您可以将此类多边形转换为弯曲的贝塞尔三次曲线，但这并不像听起来那么容易......
你想要的需要非仿射变换。 SVG 不支持非仿射变换。
@VagueExplanation：该示例每个块没有一个 SVG 图像。它只是一堆小路径，代码指定如何绘制每条线。正如您的问题所暗示的那样，这与转换更复杂的 SVG 图像相去甚远。

标签： javascript d3.js svg geometry transform

【解决方案1】：

我认为保形映射是要走的路。例如，我从原始正方形源和使用保形映射的圆形排列（并适当扭曲）的正方形开始。请参阅 Circular Image 和 Corresponding Square Image。但是请注意，我首先将 SVG 源转换为 png 图像，然后对 png 图像中的每个像素应用保形映射变换。如果有人有一种完全在 SVG 域中映射的方法[源仅使用直线和贝塞尔曲线]，请 pl。让我们知道！

我无法提供代码——它太复杂并且使用专有库）。这是一种方法。

为了计算共形映射，我使用了一个复杂的代数库。 JEP 就是一个例子。对于 OUTPUT 图像中的每个像素，您设置 Z = (x, y)，其中 (x, y) 是像素的坐标，Z 是复变量，具有实部 x 和虚部 y。然后你计算 NEWZ = f(Z) 其中 f 是你想要的任何函数。对于圆形，我使用了诸如“（ln（Z * 1）/pi）* 6-9”之类的表达式，其中对数（ln）提供圆形度，6表示圆形中有6个弯曲的正方形，-9是缩放比例使图像居中和放置的因素。根据 NEWZ 的 (X, Y) 值，您可以查找旧图像以找到要放置在新图像中的像素。当 (X, Y) 值超出旧图像的大小时，我只是使用旧图像的平铺来确定像素。当 X 和 Y 是分数（非整数）时，您以加权方式平均邻居。

【讨论】：

你能添加代码来实现你在图像中显示的内容吗？