将JavaScript中的SVG变成弧形

Question

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

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

我收录了我想要的图画。我最终想要制作更多并制作一个戒指，然后是更小变形的同心圆环。

Answer 1

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

我无法提供代码-太复杂了，使用专有库）。这是一种方法。

为了计算共形映射，我使用了一个复杂的代数库。 JEP就是一个例子。对于输出图像中的每个像素，设置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为小数（非整数）时，您将以加权方式对邻居进行平均。